vue自动登录实现
实现自动登录的基本思路
自动登录通常结合前端（Vue）和后端（如Token验证）实现，核心流程包括：
- 用户首次登录时，后端返回有效Token并存储在前端（如localStorage）。
- 再次访问时，前端自动发送Token到后端验证，通过后跳过登录页。
前端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 Router中配置全局前置守卫，检查本地是否存在有效Token：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('auth_token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});后端Token验证逻辑
后端需提供验证接口（如/api/validate-token），示例Node.js代码：
app.get('/api/validate-token', (req, res) => {
const token = req.headers.authorization?.split(' ')[1];
if (!token) return res.status(401).json({ valid: false });
jwt.verify(token, 'SECRET_KEY', (err) => {
res.json({ valid: !err });
});
});自动登录触发时机
在Vue根实例或主页面组件的created钩子中发起验证：
created() {
if (localStorage.getItem('auth_token')) {
axios.get('/api/validate-token').then(response => {
if (response.data.valid) {
this.$router.push('/dashboard');
}
});
}
}安全增强措施
- 设置Token过期时间（如JWT的
exp字段） - 使用HttpOnly Cookies存储敏感信息（需配合SameSite属性）
- 定期刷新Token机制
完整示例代码结构
/src
/utils
auth.js # 封装Token操作
http.js # axios配置
/router
index.js # 路由守卫配置
/views
Login.vue # 登录页处理Token存储
Main.vue # 主页触发自动验证
