当前位置：首页 > VUE

vue实现记住密码

2026-01-15 05:55:51VUE

Vue 实现记住密码功能

在 Vue 中实现记住密码功能通常涉及前端表单处理、本地存储（如 localStorage 或 cookie）以及安全注意事项。以下是具体实现方法：

使用 localStorage 存储用户凭证

创建登录表单组件 在 Vue 模板中添加复选框绑定 v-model，用于标记是否记住密码：

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

处理登录逻辑 在提交时根据复选框状态存储数据到 localStorage：

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false
    };
  },
  methods: {
    handleLogin() {
      if (this.rememberMe) {
        localStorage.setItem('username', this.username);
        localStorage.setItem('password', this.password);
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
      }
      // 调用登录 API
    }
  },
  created() {
    const savedUsername = localStorage.getItem('username');
    const savedPassword = localStorage.getItem('password');
    if (savedUsername && savedPassword) {
      this.username = savedUsername;
      this.password = savedPassword;
      this.rememberMe = true;
    }
  }
};
</script>

使用 Cookie 替代 localStorage

如果需要更灵活的过期时间或后端读取，可以使用 js-cookie 库：

安装依赖：
```
npm install js-cookie
```

修改存储逻辑：

import Cookies from 'js-cookie';

// 存储（设置7天过期）
if (this.rememberMe) {
  Cookies.set('username', this.username, { expires: 7 });
  Cookies.set('password', this.password, { expires: 7 });
}

// 读取
const savedUsername = Cookies.get('username');
const savedPassword = Cookies.get('password');

安全注意事项

避免明文存储密码 推荐只存储用户名，密码通过后端返回的 token 替代：
```
// 登录成功后存储 token
localStorage.setItem('authToken', response.data.token);
```
使用 HTTPS 确保所有传输加密，防止中间人攻击。

提供显式退出选项 清除所有存储的敏感数据：

localStorage.removeItem('authToken');
Cookies.remove('username');

完整示例（Token 方案）

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

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false
    };
  },
  created() {
    this.username = localStorage.getItem('username') || '';
    this.rememberMe = !!this.username;
  },
  methods: {
    async handleLogin() {
      const res = await api.login(this.username, this.password);
      if (res.success) {
        if (this.rememberMe) {
          localStorage.setItem('username', this.username);
        } else {
          localStorage.removeItem('username');
        }
        localStorage.setItem('authToken', res.token);
      }
    }
  }
};
</script>