vue 实现token登录
实现 Token 登录的基本流程
在 Vue 中实现 Token 登录通常涉及前端与后端的交互，主要包括登录请求、Token 存储、请求拦截和权限验证等步骤。
登录请求与 Token 获取
前端通过 HTTP 请求（如 Axios）向后端发送登录信息（用户名和密码），后端验证成功后返回 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 中，以实现页面刷新后的持久化。也可以使用 Vuex 管理 Token 状态。
// 存储 Token
localStorage.setItem('auth_token', token);
// 读取 Token
const token = localStorage.getItem('auth_token');
// 清除 Token
localStorage.removeItem('auth_token');请求拦截与 Token 验证
通过 Axios 的请求拦截器，在每次请求时自动将 Token 添加到请求头中。
// 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.beforeEach((to, from, next) => {
const token = localStorage.getItem('auth_token');
if (to.meta.requiresAuth && !token) {
next('/login'); // 跳转到登录页
} else {
next(); // 放行
}
});Token 过期处理
后端通常会设置 Token 有效期，前端可以通过响应拦截器检查 Token 是否过期，并跳转到登录页。
// Axios 响应拦截器
axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('auth_token');
router.push('/login'); // Token 过期或无效，跳转到登录页
}
return Promise.reject(error);
});退出登录功能
清除本地存储的 Token 并跳转到登录页。
// 退出登录方法
logout() {
localStorage.removeItem('auth_token');
this.$router.push('/login');
}通过以上步骤，可以实现 Vue 中的 Token 登录功能。实际开发中需根据后端接口调整请求和响应逻辑。
