当前位置：首页 > VUE

vue实现记住密码

2026-03-08 08:37:09VUE

实现记住密码功能

在Vue中实现记住密码功能通常涉及以下步骤，结合前端存储和后端验证：

vue实现记住密码

使用localStorage存储登录信息

// 登录成功后存储信息
handleLogin() {
  axios.post('/api/login', this.form).then(res => {
    if (this.rememberMe) {
      localStorage.setItem('username', this.form.username)
      localStorage.setItem('password', this.form.password)
      localStorage.setItem('rememberMe', true)
    } else {
      localStorage.removeItem('username')
      localStorage.removeItem('password')
      localStorage.removeItem('rememberMe')
    }
  })
}

页面加载时自动填充

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

安全增强方案

对于更安全的实现，建议只存储用户名和记住状态，密码应该只在会话期间保留：

vue实现记住密码

// 安全版本
handleLogin() {
  axios.post('/api/login', this.form).then(res => {
    if (this.rememberMe) {
      localStorage.setItem('username', this.form.username)
      localStorage.setItem('rememberMe', true)
    } else {
      localStorage.removeItem('username')
      localStorage.removeItem('rememberMe')
    }
  })
}

使用vuex-persistedstate持久化状态

安装插件后配置：

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      paths: ['auth']
    })
  ],
  state: {
    auth: {
      username: '',
      rememberMe: false
    }
  }
})

结合Cookie实现自动登录

后端应返回带有HttpOnly标志的安全Cookie：

axios.post('/api/login', {
  username: this.username,
  password: this.password,
  remember: this.rememberMe
}).then(response => {
  // 后端应设置长期有效的Cookie
})

安全注意事项

避免明文存储密码，即使在前端也应考虑加密
敏感信息不应长期存储在localStorage中
确保使用HTTPS协议传输凭证
实现自动登出机制，设置合理的会话有效期
考虑使用refresh token机制替代长期存储密码

完整组件示例

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rememberMe: false
    }
  },
  mounted() {
    this.rememberMe = localStorage.getItem('rememberMe') === 'true'
    if (this.rememberMe) {
      this.form.username = localStorage.getItem('username') || ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
      if (this.rememberMe) {
        localStorage.setItem('username', this.form.username)
        localStorage.setItem('rememberMe', true)
      } else {
        localStorage.removeItem('username')
        localStorage.removeItem('rememberMe')
      }
    }
  }
}
</script>