vue 实现token 登录
实现Token登录的基本流程
在Vue中实现Token登录通常涉及前端与后端的交互，核心流程包括用户认证、Token存储、请求拦截和权限控制。以下是具体实现方法：
用户登录与Token获取
创建登录表单，提交用户凭证（如用户名和密码）到后端API。成功认证后，后端返回Token（通常是JWT），前端需要存储该Token。
// 登录方法示例
async login() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
const token = response.data.token;
localStorage.setItem('auth_token', token); // 存储Token
this.$router.push('/dashboard'); // 跳转到受保护页面
} catch (error) {
console.error('登录失败:', error);
}
}Token存储与持久化
将Token存储在localStorage或sessionStorage中，确保页面刷新后仍能保持登录状态。注意避免敏感信息泄露。
// 存储Token
localStorage.setItem('auth_token', token);
// 读取Token
const token = localStorage.getItem('auth_token');请求拦截器配置
通过Axios拦截器，在每次请求头中自动添加Token，实现身份验证。
import axios from 'axios';
axios.interceptors.request.use(config => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});路由守卫与权限控制
使用Vue Router的导航守卫（beforeEach）检查Token，限制未登录用户访问受保护路由。
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('auth_token');
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login'); // 跳转到登录页
} else {
next(); // 放行
}
});Token过期与刷新
处理Token过期问题，通常通过拦截响应中的401错误，触发刷新Token或重新登录。
axios.interceptors.response.use(response => response, error => {
if (error.response.status === 401) {
localStorage.removeItem('auth_token');
window.location.href = '/login'; // 强制重新登录
}
return Promise.reject(error);
});退出登录逻辑
清除本地存储的Token，并重置用户状态。
logout() {
localStorage.removeItem('auth_token');
this.$router.push('/login');
}安全注意事项
- 避免将Token直接暴露在客户端代码中。
- 使用HTTPS传输敏感数据。
- 考虑设置Token的过期时间（由后端控制）。
- 对于高安全性场景，可结合HttpOnly Cookie增强保护。
通过以上步骤，可以实现一个完整的Vue Token登录系统。实际开发中需根据项目需求调整细节，例如结合Vuex管理全局状态或使用第三方库（如vue-auth）简化流程。
