当前位置：首页 > VUE

vue记住登录功能实现

2026-02-23 13:00:49VUE

实现 Vue 记住登录功能的方法

使用 localStorage 或 sessionStorage 存储登录状态
将用户登录信息（如 token 或用户名）存储在浏览器的 localStorage 中，关闭浏览器后仍能保留。sessionStorage 仅在当前会话有效，关闭浏览器后失效。

vue记住登录功能实现

// 登录成功后存储信息
localStorage.setItem('userToken', 'your_token_here');
localStorage.setItem('rememberMe', 'true');

// 退出登录时清除
localStorage.removeItem('userToken');
localStorage.removeItem('rememberMe');

结合 Vuex 状态管理
在 Vuex 中初始化时从 localStorage 读取登录状态，保持全局状态同步。

vue记住登录功能实现

// 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，结合后端验证机制增强安全性。