vue自动登录实现
自动登录实现方法
在Vue中实现自动登录功能通常涉及以下几个关键步骤：
使用本地存储保存token 将登录成功后的token保存到localStorage或sessionStorage中，确保浏览器关闭后仍能保留登录状态。
localStorage.setItem('auth_token', response.data.token);路由守卫检查登录状态 在路由跳转前通过全局前置守卫验证用户是否已登录，未登录则跳转到登录页。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('auth_token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});axios请求拦截器 为所有HTTP请求自动添加认证头，避免手动在每个请求中添加token。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});自动登录逻辑 应用初始化时检查存储中的token，存在则自动登录并获取用户信息。
created() {
const token = localStorage.getItem('auth_token');
if (token) {
this.$store.dispatch('autoLogin', token);
}
}token过期处理 响应拦截器中检查401状态码，自动跳转登录页并清除无效token。
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('auth_token');
router.push('/login');
}
return Promise.reject(error);
}
);安全注意事项
设置合理过期时间 JWT token应设置适当的过期时间，避免长期有效的token带来安全风险。
使用HttpOnly Cookies 考虑使用HttpOnly cookie存储敏感信息，防止XSS攻击获取token。
定期刷新token 实现token刷新机制，在token临近过期时自动获取新token，避免频繁要求用户重新登录。
敏感操作二次验证 对于关键操作如修改密码等，即使已自动登录也应要求用户再次输入密码确认。
