vue登录功能实现
Vue 登录功能实现
创建登录表单组件
在 Vue 项目中创建一个登录表单组件，包含用户名和密码输入框以及提交按钮。使用 v-model 实现双向数据绑定。
<template>
<form @submit.prevent="handleSubmit">
<input v-model="username" type="text" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleSubmit() {
// 登录逻辑
}
}
}
</script>实现登录逻辑
在 handleSubmit 方法中调用后端 API 进行验证。使用 axios 发送 POST 请求，传递用户名和密码。
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
// 处理登录成功
} catch (error) {
// 处理错误
}
}
}处理登录状态
登录成功后，保存返回的 token 到本地存储或 Vuex 中，并跳转到主页。
localStorage.setItem('token', response.data.token)
this.$router.push('/home')路由守卫配置
在路由配置中添加全局前置守卫，检查用户是否已登录，未登录则重定向到登录页。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})错误处理和用户反馈
在登录失败时显示错误信息，增强用户体验。
catch (error) {
this.errorMessage = '用户名或密码错误'
}表单验证
添加基本的表单验证，确保用户名和密码不为空。
if (!this.username || !this.password) {
this.errorMessage = '请输入用户名和密码'
return
}样式优化
为登录表单添加 CSS 样式，提升视觉效果。
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: 0 auto;
}
input {
margin-bottom: 10px;
padding: 8px;
}
button {
padding: 10px;
background: #42b983;
color: white;
border: none;
}通过以上步骤可以实现一个完整的 Vue 登录功能，包括表单创建、数据提交、状态管理和路由控制等关键部分。
