vue自动登录如何实现
实现 Vue 自动登录的方法
使用 localStorage 或 sessionStorage 存储 token
将用户登录后的 token 存储在 localStorage 或 sessionStorage 中，页面刷新时从存储中读取 token 并验证。
// 登录成功后存储 token
localStorage.setItem('token', response.data.token);
// 应用初始化时检查 token
const token = localStorage.getItem('token');
if (token) {
// 发送请求验证 token 有效性
axios.get('/validate', { headers: { Authorization: `Bearer ${token}` } })
.then(() => {
// 验证通过，跳转到主页
})
.catch(() => {
// 验证失败，清除无效 token
localStorage.removeItem('token');
});
}结合 Vue Router 的导航守卫
在路由跳转前检查 token，实现自动登录或重定向到登录页。
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});使用 Vuex 持久化状态
通过 vuex-persistedstate 插件持久化 Vuex 中的登录状态，避免页面刷新后状态丢失。
import createPersistedState from 'vuex-persistedstate';
const store = new Vuex.Store({
plugins: [createPersistedState()],
state: {
user: null,
token: ''
},
mutations: {
setUser(state, payload) {
state.user = payload.user;
state.token = payload.token;
}
}
});后端配合实现自动登录
后端需提供 token 验证接口，前端在初始化时携带 token 请求该接口。若 token 有效，后端返回用户信息完成自动登录。
安全注意事项
- 避免存储敏感信息（如密码）在客户端。
- 使用 HTTPS 防止 token 被拦截。
- 设置 token 过期时间，定期强制重新登录。
扩展：记住登录功能实现
若需“记住我”功能，可将 token 过期时间延长，或使用 refresh token 机制。
// 登录时根据“记住我”选项设置存储期限
if (rememberMe) {
localStorage.setItem('token', token);
} else {
sessionStorage.setItem('token', token);
}
