vue 实现登录功能
创建登录页面组件
在Vue项目中创建一个Login.vue组件，包含表单元素如用户名和密码输入框、登录按钮。使用v-model双向绑定数据。
<template>
<div class="login">
<form @submit.prevent="handleSubmit">
<input v-model="username" type="text" placeholder="用户名"/>
<input v-model="password" type="password" placeholder="密码"/>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
}
}
</script>处理表单提交
在methods中添加handleSubmit方法，验证输入并调用登录API。使用axios发送POST请求到后端接口。
methods: {
async handleSubmit() {
if (!this.username || !this.password) {
alert('请输入用户名和密码')
return
}
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
// 处理登录成功逻辑
} catch (error) {
console.error('登录失败:', error)
}
}
}存储用户认证状态
登录成功后，将返回的token存储在localStorage或Vuex中，用于后续请求的身份验证。
localStorage.setItem('token', response.data.token)
this.$store.commit('setUser', response.data.user)
this.$router.push('/dashboard')路由配置和导航守卫
在router/index.js中配置路由，并添加全局前置守卫检查登录状态。
const routes = [
{
path: '/login',
component: Login
},
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})请求拦截器
在axios拦截器中添加token到请求头，实现自动身份验证。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})错误处理
添加响应拦截器处理401未授权错误，自动跳转到登录页面。
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
})用户注销功能
实现注销功能，清除本地存储的token和用户状态。
methods: {
logout() {
localStorage.removeItem('token')
this.$store.commit('clearUser')
this.$router.push('/login')
}
}
