vue记住登录功能实现
实现 Vue 记住登录功能的方法
使用 localStorage 或 sessionStorage 存储登录状态
将用户登录信息（如 token 或用户名）存储在浏览器的 localStorage 中，关闭浏览器后仍能保留。sessionStorage 仅在当前会话有效，关闭浏览器后失效。
// 登录成功后存储信息
localStorage.setItem('userToken', 'your_token_here');
localStorage.setItem('rememberMe', 'true');
// 退出登录时清除
localStorage.removeItem('userToken');
localStorage.removeItem('rememberMe');结合 Vuex 状态管理
在 Vuex 中初始化时从 localStorage 读取登录状态，保持全局状态同步。
// store.js
const store = new Vuex.Store({
state: {
userToken: localStorage.getItem('userToken') || null,
rememberMe: localStorage.getItem('rememberMe') === 'true'
},
mutations: {
setUserToken(state, token) {
state.userToken = token;
localStorage.setItem('userToken', token);
}
}
});登录表单添加记住我选项
在登录表单中增加复选框，绑定到组件的 data 或 Vuex 状态。
<template>
<input type="checkbox" v-model="rememberMe"> 记住我
</template>
<script>
export default {
data() {
return {
rememberMe: false
};
},
methods: {
login() {
if (this.rememberMe) {
localStorage.setItem('userToken', 'token_value');
} else {
sessionStorage.setItem('userToken', 'token_value');
}
}
}
};
</script>路由守卫验证登录状态
在路由导航前检查 localStorage 或 Vuex 中的登录状态，决定是否跳转。
// router.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('userToken') !== null;
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});安全注意事项
避免存储敏感信息如密码，建议只存储 token 或加密后的数据。定期清理过期的 token，结合后端验证机制增强安全性。
