在Vue中实现登录验证,通常会涉及到以下几个步骤:
创建登录表单:在Login.vue
组件中创建一个表单,让用户输入用户名和密码。
发送登录请求:在表单的提交方法中,使用Axios等HTTP客户端向后端API发送登录请求,包含用户的用户名和密码。
处理登录响应:如果后端验证用户凭据成功,会返回一个JWT(Json Web Token)。前端需要把这个JWT保存起来,通常存放在localStorage
或Vuex
状态管理中。
路由守卫:在Vue Router中设置路由守卫,确保在跳转路由前用户已经登录且token有效。如果用户未登录或token无效,重定向到登录页面。
发送带有Token的请求:在发送请求时,需要在HTTP请求头中添加JWT Token,以便后端可以验证用户的请求。
后端验证Token:后端API需要验证每个请求的Token,如果Token有效,则处理请求;如果无效或过期,则返回401状态码。
处理401状态码:如果前端收到401状态码,需要清除存储的Token,并重定向用户到登录页面。
以下是一个简化的示例流程:
// Login.vue
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="用户名"/>
<input type="password" v-model="loginForm.password" placeholder="密码"/>
<button @click="login">登录</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
userToken: ''
};
},
methods: {
login() {
// 发送登录请求
axios.post('/api/login', this.loginForm)
.then(response => {
// 处理登录成功
this.userToken = 'Bearer ' + response.data.token;
localStorage.setItem('Authorization', this.userToken);
// 跳转到主页或其他页面
this.$router.push('/home');
})
.catch(error => {
// 处理登录失败
console.error('登录失败:', error);
});
}
}
};
</script>
在router/index.js
中设置路由守卫:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
// ...定义路由
});
router.beforeEach((to, from, next) => {
// 检查是否需要登录
if (to.matched.some(record => record.meta.requiresAuth)) {
// 检查是否有token
if (!localStorage.getItem('Authorization')) {
// 没有token,重定向到登录页面
next('/login');
} else {
next();
}
} else {
next();
}
});
export default router;
确保在每次请求时附加Token:
// 请求拦截器
axios.interceptors.request.use(function (config) {
const token = localStorage.getItem('Authorization');
if (token) {
config.headers.Authorization = token;
}
return config;
}, function (error) {
return Promise.reject(error);
});
如果后端返回401,清除Token并重定向:
// 响应拦截器
axios.interceptors.response.use(response => {
// ...处理响应
return response;
}, error => {
if (error.response && error.response.status === 401) {
localStorage.removeItem('Authorization');
router.push('/login');
}
return Promise.reject(error);
});
这是一个基本的登录验证流程,你可以根据项目的具体需求进行调整和扩展。