当前位置：首页 > VUE

Vue怎么实现记住我

2026-02-22 11:29:08VUE

Vue实现记住登录状态的方法

使用浏览器的本地存储（localStorage或sessionStorage）保存用户登录信息。localStorage适合长期存储，sessionStorage在浏览器关闭后失效。

// 登录成功后保存用户信息
localStorage.setItem('userToken', token);
localStorage.setItem('rememberMe', true);

自动填充登录表单

在组件挂载时检查本地存储中是否存在记住的登录信息，存在则自动填充表单。

Vue怎么实现记住我

mounted() {
  if (localStorage.getItem('rememberMe') === 'true') {
    this.form.username = localStorage.getItem('username') || '';
    this.form.password = localStorage.getItem('password') || '';
    this.rememberMe = true;
  }
}

安全注意事项

敏感信息如密码不建议直接存储在本地，应采用token机制。服务端应生成有时效性的token代替直接存储密码。

// 更安全的做法
axios.post('/login', credentials).then(response => {
  localStorage.setItem('authToken', response.data.token);
});

退出登录清除数据

用户主动退出时需要清除存储的登录状态。

Vue怎么实现记住我

logout() {
  localStorage.removeItem('userToken');
  localStorage.removeItem('rememberMe');
  // 其他清理逻辑
}

路由守卫验证

在路由跳转前验证本地存储中的登录状态，未登录则跳转到登录页。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('userToken');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

记住我选项实现

在登录表单中添加记住我复选框，根据选择决定存储方式。

<template>
  <input type="checkbox" v-model="rememberMe"> 记住我
</template>

<script>
export default {
  data() {
    return {
      rememberMe: false
    }
  },
  methods: {
    login() {
      if (this.rememberMe) {
        localStorage.setItem('userToken', token);
      } else {
        sessionStorage.setItem('userToken', token);
      }
    }
  }
}
</script>