当前位置：首页 > VUE

vue 实现记住密码

2026-02-18 00:24:35VUE

实现记住密码功能

在Vue中实现记住密码功能，通常需要结合前端存储机制和后端验证逻辑。以下是几种常见的实现方式：

使用localStorage存储用户凭证

// 登录方法示例
methods: {
  login() {
    if (this.rememberMe) {
      localStorage.setItem('username', this.username)
      localStorage.setItem('password', this.password)
    } else {
      localStorage.removeItem('username')
      localStorage.removeItem('password')
    }
    // 调用登录API
  },
  mounted() {
    const savedUsername = localStorage.getItem('username')
    const savedPassword = localStorage.getItem('password')
    if (savedUsername && savedPassword) {
      this.username = savedUsername
      this.password = savedPassword
      this.rememberMe = true
    }
  }
}

使用cookie存储登录状态

// 设置cookie
document.cookie = `username=${this.username}; max-age=2592000` // 30天有效期
document.cookie = `rememberMe=true; max-age=2592000`

// 读取cookie
function getCookie(name) {
  const value = `; ${document.cookie}`
  const parts = value.split(`; ${name}=`)
  if (parts.length === 2) return parts.pop().split(';').shift()
}

更安全的实现方式（推荐）

后端生成token返回给前端
前端根据"记住我"选项决定token存储方式
短期会话使用sessionStorage，长期记住使用localStorage或设置过期时间的cookie

// 登录成功后处理
handleLoginSuccess(response) {
  const token = response.data.token
  if (this.rememberMe) {
    localStorage.setItem('auth_token', token)
  } else {
    sessionStorage.setItem('auth_token', token)
  }
}

安全注意事项

避免明文存储密码，建议存储加密后的token
敏感信息应设置合理的过期时间
提供明显的注销功能清除存储的凭证
考虑使用HttpOnly cookie增强安全性
重要系统应结合二次验证机制

完整组件示例

vue 实现记住密码

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <label>
      <input type="checkbox" v-model="rememberMe"> 记住我
    </label>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false
    }
  },
  mounted() {
    const savedUsername = localStorage.getItem('username')
    if (savedUsername) {
      this.username = savedUsername
      this.rememberMe = true
    }
  },
  methods: {
    login() {
      // 调用API验证
      if (this.rememberMe) {
        localStorage.setItem('username', this.username)
      } else {
        localStorage.removeItem('username')
      }
    }
  }
}
</script>