vue实现token
Vue 中实现 Token 认证的步骤
存储 Token
在用户登录成功后，将服务器返回的 Token 存储到本地。可以使用 localStorage 或 sessionStorage 实现持久化存储。
// 登录成功后保存 Token
localStorage.setItem('token', response.data.token);请求拦截器
在发送请求时，通过 Axios 的请求拦截器将 Token 添加到请求头中，确保每次请求都携带认证信息。
import axios from 'axios';
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});响应拦截器
通过响应拦截器处理 Token 过期或无效的情况，例如返回 401 状态码时跳转到登录页。
axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('token');
router.push('/login');
}
return Promise.reject(error);
});路由守卫
在 Vue Router 中配置全局前置守卫，检查用户是否已登录（是否存在 Token），未登录则跳转到登录页。
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});Token 刷新
如果 Token 具有有效期，可以在过期前通过刷新 Token 接口获取新的 Token，避免用户频繁重新登录。
function refreshToken() {
return axios.post('/refresh-token', {
refreshToken: localStorage.getItem('refreshToken')
}).then(response => {
localStorage.setItem('token', response.data.token);
return response.data.token;
});
}注销处理
用户注销时清除本地存储的 Token 并跳转到登录页。
function logout() {
localStorage.removeItem('token');
router.push('/login');
}注意事项
- Token 应通过 HTTPS 传输，避免明文暴露。
- 敏感操作（如支付、修改密码）建议增加二次验证。
- 避免在客户端存储过多敏感信息，Token 应仅包含必要的数据。
