vue实现自动登录
实现自动登录的基本思路
自动登录通常结合本地存储（如localStorage）和Token验证机制实现。用户首次登录后，服务器返回的Token会被保存在本地，下次打开应用时自动携带Token验证身份。
存储Token到本地
登录成功后，将服务器返回的Token存储到localStorage或cookie中：
// 登录成功后的回调
localStorage.setItem('authToken', response.data.token);初始化时检查Token
在Vue应用的入口文件（如main.js）或根组件中，检查是否存在Token并自动登录：
const token = localStorage.getItem('authToken');
if (token) {
// 携带Token发送验证请求
axios.get('/api/validate', {
headers: { 'Authorization': `Bearer ${token}` }
}).then(response => {
// 验证成功，更新Vuex状态或全局用户信息
store.commit('setUser', response.data.user);
}).catch(() => {
// Token无效则清除
localStorage.removeItem('authToken');
});
}路由守卫拦截
通过Vue Router的全局前置守卫，对需要登录的页面进行保护：
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
const isAuthenticated = store.state.user || localStorage.getItem('authToken');
if (requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});封装axios拦截器
在axios请求拦截器中自动添加Token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('authToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});安全注意事项
- 避免长期有效的Token，建议设置过期时间并实现刷新Token机制。
- 敏感操作应要求重新输入密码。
- 生产环境建议使用
HttpOnly的Cookie存储Token以减少XSS风险。
可选扩展功能
- 实现Token自动刷新：在Token临近过期时，通过接口获取新Token。
- 多标签页同步：通过
window.addEventListener('storage')监听Token变化，保持多个标签页登录状态同步。 - 记住我功能：区分会话Cookie和持久化Cookie，提供选项让用户选择是否长期自动登录。
