vue自动登录实现
Vue 自动登录实现方法
使用 localStorage 或 sessionStorage 存储 token
在用户登录成功后，将 token 存储在 localStorage 或 sessionStorage 中。localStorage 数据持久化，sessionStorage 在浏览器关闭后清除。
// 登录成功后存储 token
localStorage.setItem('token', response.data.token);在应用初始化时检查是否存在 token，存在则自动登录：
created() {
const token = localStorage.getItem('token');
if (token) {
this.autoLogin(token);
}
}使用 Vuex 管理登录状态
在 Vuex 中维护登录状态和用户信息，便于全局访问：
// store.js
state: {
token: localStorage.getItem('token') || '',
isAuthenticated: !!localStorage.getItem('token')
},
mutations: {
setToken(state, token) {
state.token = token;
state.isAuthenticated = true;
localStorage.setItem('token', token);
},
clearToken(state) {
state.token = '';
state.isAuthenticated = false;
localStorage.removeItem('token');
}
}路由守卫实现自动登录
在路由跳转前检查登录状态，未登录但有 token 则尝试自动登录：
// router.js
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.state.isAuthenticated && token) {
store.dispatch('autoLogin', token).then(() => {
next();
}).catch(() => {
next('/login');
});
} else if (!store.state.isAuthenticated) {
next('/login');
} else {
next();
}
} else {
next();
}
});自动登录 API 请求
实现自动登录的 API 请求方法，验证 token 有效性：
// auth.js
autoLogin(token) {
return axios.get('/api/auto-login', {
headers: {
'Authorization': `Bearer ${token}`
}
});
}记住我功能扩展
添加记住我选项，延长 token 有效期：
login() {
if (this.rememberMe) {
localStorage.setItem('token', token);
} else {
sessionStorage.setItem('token', token);
}
}安全注意事项
- 使用 HTTPS 传输 token
- 设置合理的 token 过期时间
- 敏感操作需要重新验证密码
- 考虑使用 refresh token 机制
完整示例代码
// 登录组件
methods: {
handleLogin() {
api.login(this.credentials).then(response => {
const token = response.data.token;
this.$store.commit('setToken', token);
if (this.rememberMe) {
localStorage.setItem('token', token);
}
this.$router.push('/dashboard');
});
}
}
