vue实现长期登录
Vue 实现长期登录的方法
长期登录通常通过结合 localStorage、sessionStorage 或 Cookie 存储用户凭证（如 token），并在每次请求时验证有效性来实现。以下是具体实现方案：
使用 localStorage 存储 token
用户登录成功后，将 token 存入 localStorage，并在 Vue 的全局请求拦截器中自动附加该 token。
// 登录成功后存储 token
localStorage.setItem('auth_token', response.data.token);
// 在 axios 拦截器中添加 token
axios.interceptors.request.use(config => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});自动检查登录状态
在 Vue 的根实例或路由守卫中检查 localStorage 是否存在 token，决定是否跳转到登录页。
// 路由守卫示例
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('auth_token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});实现 token 自动续期
若后端支持 refresh_token 机制，可以在 token 过期前通过 refresh_token 获取新 token。
// 响应拦截器中处理 token 过期
axios.interceptors.response.use(
response => response,
error => {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
return axios.post('/refresh_token', { refresh_token: localStorage.getItem('refresh_token') })
.then(res => {
localStorage.setItem('auth_token', res.data.token);
originalRequest.headers.Authorization = `Bearer ${res.data.token}`;
return axios(originalRequest);
});
}
return Promise.reject(error);
}
);安全注意事项
- 避免将敏感信息直接存入
localStorage，可采用HttpOnly的Cookie存储。 - 设置
token的合理过期时间，并定期强制重新登录。 - 前端需配合后端实现
CSRF防护（如SameSite属性）。
退出登录处理
清除存储的 token 并重置用户状态。
// 退出登录逻辑
logout() {
localStorage.removeItem('auth_token');
this.$router.push('/login');
}
