vue实现点击登录
Vue 实现点击登录功能
创建登录表单组件
在 Vue 项目中创建一个登录表单组件，通常命名为 LoginForm.vue。该组件包含用户名和密码输入框以及登录按钮。
<template>
<div class="login-form">
<input v-model="username" type="text" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button @click="handleLogin">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 登录逻辑
}
}
}
</script>实现登录逻辑
在 handleLogin 方法中实现登录逻辑，通常包括验证输入、发送登录请求和处理响应。
methods: {
async handleLogin() {
if (!this.username || !this.password) {
alert('请输入用户名和密码');
return;
}
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
if (response.data.success) {
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} else {
alert('登录失败: ' + response.data.message);
}
} catch (error) {
alert('登录请求失败: ' + error.message);
}
}
}添加路由跳转
在 Vue Router 中配置登录后的跳转路由。确保用户登录成功后能够跳转到指定页面。
const router = new VueRouter({
routes: [
{ path: '/login', component: LoginForm },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
});添加导航守卫
使用全局前置守卫检查用户是否已登录，未登录则重定向到登录页面。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login');
} else {
next();
}
});样式优化
为登录表单添加基本样式，提升用户体验。
.login-form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: 0 auto;
}
.login-form input {
margin-bottom: 10px;
padding: 8px;
}
.login-form button {
padding: 10px;
background-color: #42b983;
color: white;
border: none;
cursor: pointer;
}测试登录功能
运行项目并测试登录功能是否正常工作。确保输入正确的用户名和密码后能够成功跳转到目标页面，错误的输入则显示相应提示。
