前端vue登录功能实现
Vue 登录功能实现步骤
创建登录表单组件
在 Vue 项目中创建一个登录组件，通常命名为 Login.vue。该组件包含用户名和密码输入框以及提交按钮。
<template>
<div class="login-container">
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 登录逻辑
}
}
}
</script>配置路由
在 Vue Router 中配置登录页面的路由，确保用户访问 /login 时可以加载登录组件。
import Login from './views/Login.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
]实现登录逻辑
在 handleLogin 方法中调用后端 API 进行用户验证。可以使用 Axios 或其他 HTTP 客户端发送请求。
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败', error)
}
}
}状态管理
使用 Vuex 管理用户登录状态，存储用户信息和 token。
const store = new Vuex.Store({
state: {
user: null,
token: null
},
mutations: {
setUser(state, user) {
state.user = user
},
setToken(state, token) {
state.token = token
}
}
})路由守卫
添加全局路由守卫，检查用户是否已登录，未登录则重定向到登录页。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.name !== 'Login' && !isAuthenticated) {
next({ name: 'Login' })
} else {
next()
}
})错误处理和反馈
在登录失败时显示错误信息，增强用户体验。
<template>
<div v-if="error" class="error-message">
{{ error }}
</div>
</template>
<script>
export default {
data() {
return {
error: null
}
},
methods: {
async handleLogin() {
try {
// 登录逻辑
} catch (error) {
this.error = '用户名或密码错误'
}
}
}
}
</script>注销功能
实现用户注销功能，清除本地存储的 token 和用户状态。
methods: {
logout() {
localStorage.removeItem('token')
this.$store.commit('setUser', null)
this.$router.push('/login')
}
}
