当前位置：首页 > VUE

vue 实现记住密码

2026-03-30 00:52:23VUE

Vue 实现记住密码功能

在 Vue 中实现记住密码功能通常需要结合浏览器的本地存储（如 localStorage 或 sessionStorage）来保存用户登录信息。以下是实现方法：

使用 localStorage 存储登录信息

通过 localStorage 可以长期保存用户登录信息，即使关闭浏览器后再次打开仍然有效。

// 登录方法示例
methods: {
  login() {
    // 模拟登录请求
    const { username, password, rememberMe } = this.form

    if (rememberMe) {
      // 存储到 localStorage
      localStorage.setItem('username', username)
      localStorage.setItem('password', password)
    } else {
      // 清除存储
      localStorage.removeItem('username')
      localStorage.removeItem('password')
    }

    // 执行登录逻辑...
  }
}

使用 sessionStorage 存储登录信息

sessionStorage 仅在当前会话有效，关闭浏览器标签页后数据会被清除。

methods: {
  login() {
    const { username, password, rememberMe } = this.form

    if (rememberMe) {
      // 存储到 sessionStorage
      sessionStorage.setItem('username', username)
      sessionStorage.setItem('password', password)
    }

    // 执行登录逻辑...
  }
}

页面加载时自动填充

在 Vue 的 created 或 mounted 钩子中检查存储的登录信息：

created() {
  const savedUsername = localStorage.getItem('username')
  const savedPassword = localStorage.getItem('password')

  if (savedUsername && savedPassword) {
    this.form.username = savedUsername
    this.form.password = savedPassword
    this.form.rememberMe = true
  }
}

安全性考虑

存储明文密码存在安全风险，建议：

只存储用户名，不存储密码
使用 token 认证而非存储密码
考虑使用加密方式存储敏感信息
实现自动登录而非记住密码功能

使用 Vuex 持久化

如果使用 Vuex 管理状态，可以结合 vuex-persistedstate 插件：

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: window.localStorage
    })
  ]
  // ...其他配置
})

实现自动登录

更安全的做法是实现自动登录而非存储密码：

vue 实现记住密码

methods: {
  login() {
    // 登录成功后
    if (this.form.rememberMe) {
      localStorage.setItem('authToken', response.data.token)
    }
  },

  checkAutoLogin() {
    const token = localStorage.getItem('authToken')
    if (token) {
      // 使用 token 自动登录
    }
  }
}

以上方法可以根据具体需求和安全要求进行调整组合使用。