当前位置：首页 > VUE

Vue怎么实现记住我

2026-01-21 20:18:03VUE

Vue实现“记住我”功能的方法

在Vue中实现“记住我”功能通常涉及前端存储用户登录状态或凭据，常见方法包括使用浏览器的本地存储（localStorage/sessionStorage）或Cookie。以下是具体实现方案：

使用localStorage存储登录状态

登录表单提交时，若勾选“记住我”，将用户token或登录状态存入localStorage：

// 登录方法示例
methods: {
  handleLogin() {
    axios.post('/login', { username, password }).then(response => {
      if (this.rememberMe) {
        localStorage.setItem('authToken', response.data.token);
      }
      sessionStorage.setItem('authToken', response.data.token); // 临时会话
    });
  }
}

页面加载时检查本地存储：

created() {
  const token = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');
  if (token) {
    this.autoLogin(token); // 自动登录逻辑
  }
}

使用Cookie存储登录状态

通过js-cookie库操作Cookie：

Vue怎么实现记住我

import Cookies from 'js-cookie';

// 登录成功后
if (this.rememberMe) {
  Cookies.set('authToken', token, { expires: 7 }); // 7天后过期
} else {
  Cookies.set('authToken', token); // 会话Cookie
}

安全注意事项

敏感信息（如密码）不应直接存储，仅保存Token
Token应设置合理的过期时间
考虑使用HttpOnly Cookie增强安全性
服务端需验证Token有效性

完整组件示例

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <label>
      <input v-model="rememberMe" type="checkbox"> 记住我
    </label>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false
    };
  },
  methods: {
    handleLogin() {
      // 调用登录API
      // 根据rememberMe选择存储方式
    }
  },
  created() {
    // 检查已有登录状态
  }
};
</script>