Vue中登录成功保存token,并每次请求携带并验证token
时间: 2023-06-28 11:05:58 浏览: 54
在 Vue 中保存 token 可以使用浏览器的 localStorage 或者 sessionStorage。localStorage 存储在本地并且不会过期,sessionStorage 存储在浏览器关闭后会自动删除。
以下是一个示例代码:
```javascript
// 登录成功后保存 token
localStorage.setItem('token', 'your_token');
// 在发送请求时携带 token
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
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response && error.response.status === 401) {
// 清除 token 并跳转到登录页面
localStorage.removeItem('token');
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
}
return Promise.reject(error);
}
);
```
在发送请求时,通过 axios 拦截器在请求头中添加 token,服务端可以从请求头中获取 token 进行验证。如果服务端返回 401 错误码,说明 token 无效或者过期,此时前端应该清除 token 并跳转到登录页面。