vue实现token
Vue 中实现 Token 验证的步骤
安装必要的依赖
使用 axios 进行 HTTP 请求，vue-router 处理路由守卫，js-cookie 管理 Cookie。通过 npm 安装：
npm install axios vue-router js-cookie配置 Axios 拦截器
在请求头中自动添加 Token，并在响应拦截器中处理 Token 过期或无效的情况：
// src/utils/request.js
import axios from 'axios';
import Cookies from 'js-cookie';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
});
service.interceptors.request.use(
config => {
const token = Cookies.get('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response.status === 401) {
// Token 过期或无效，跳转到登录页
router.push('/login');
}
return Promise.reject(error);
}
);
export default service;登录逻辑与 Token 存储
用户登录成功后，将 Token 存储到 Cookie 或 localStorage，并跳转到主页：
// src/views/Login.vue
import Cookies from 'js-cookie';
import request from '@/utils/request';
export default {
methods: {
handleLogin() {
request.post('/login', this.form)
.then(res => {
Cookies.set('token', res.token, { expires: 7 }); // 7 天过期
this.$router.push('/');
});
}
}
};路由守卫验证 Token
通过全局前置守卫检查用户是否已登录，未登录则重定向到登录页：
// src/router/index.js
import router from './router';
import Cookies from 'js-cookie';
router.beforeEach((to, from, next) => {
const token = Cookies.get('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});注销功能
清除 Token 并跳转到登录页：
// src/components/Logout.vue
import Cookies from 'js-cookie';
export default {
methods: {
handleLogout() {
Cookies.remove('token');
this.$router.push('/login');
}
}
};关键注意事项
- Token 安全：避免将 Token 存储在 localStorage 中以防止 XSS 攻击，优先使用 HttpOnly Cookie。
- 过期处理：后端应返回 401 状态码，前端拦截后强制跳转登录页。
- 刷新 Token：可通过定时任务或拦截器自动刷新 Token，减少用户重复登录。
