vue实现自动登录功能
Vue 实现自动登录功能
自动登录功能通常结合前端 Vue 和后端 API 实现，核心逻辑包括 Token 存储、自动验证和状态管理。以下是具体实现方法：
登录逻辑与 Token 存储
用户登录成功后，后端返回 Token（如 JWT）。前端需将 Token 存储到本地（localStorage 或 cookie）并记录过期时间：
// 登录成功后处理
localStorage.setItem('authToken', response.data.token);
localStorage.setItem('tokenExpiry', response.data.expiryTime);自动登录验证
应用初始化时（如 App.vue 的 created 钩子），检查本地是否存在有效 Token：
created() {
const token = localStorage.getItem('authToken');
const expiry = localStorage.getItem('tokenExpiry');
if (token && new Date(expiry) > new Date()) {
// 发送 Token 到后端验证
this.$store.dispatch('autoLogin', token);
}
}Vuex 状态管理
通过 Vuex 管理登录状态和用户信息，示例 Store 模块：
const actions = {
async autoLogin({ commit }, token) {
try {
const response = await axios.get('/api/validate', {
headers: { Authorization: `Bearer ${token}` }
});
commit('SET_USER', response.data.user);
} catch (error) {
localStorage.removeItem('authToken');
}
}
};路由守卫控制访问
使用 Vue Router 的全局守卫拦截未认证的访问：
router.beforeEach((to, from, next) => {
const isAuthenticated = store.getters.isLoggedIn;
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});安全增强建议
- HttpOnly Cookie：优先使用后端设置的 HttpOnly Cookie 存储 Token，避免 XSS 攻击。
- 刷新 Token：实现 Token 刷新机制，通过短效 Access Token 和长效 Refresh Token 组合。
- 敏感操作验证：关键操作（如修改密码）需二次验证。
完整示例代码
// main.js 或路由配置
axios.interceptors.request.use(config => {
const token = localStorage.getItem('authToken');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
});通过以上步骤，可实现基于 Token 的自动登录功能，兼顾用户体验与安全性。
