vue2中实现记住密码功能

在使用 Vue 2 和 Element UI 实现登录页面的记住密码功能时，为了安全起见，需要对密码进行加密处理。你可以使用加密库如 crypto-js 来对密码进行加密和解密。以下是完整的示例代码，展示了如何实现这个功能。

首先，确保你已经安装了 crypto-js：

npm install crypto-js
或
yarn add crypto-js 

然后，编写 Vue 组件：

<template>
  <div class="login-container">
    <el-form :model="loginForm" ref="loginForm" @submit.native.prevent="handleLogin">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js';

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        remember: false
      },
      secretKey: 'your-secret-key' // 请替换为你自己的密钥
    };
  },
  created() {
    // 尝试从localStorage中获取保存的用户名和密码
    const savedUsername = localStorage.getItem('savedUsername');
    const savedPassword = localStorage.getItem('savedPassword');
    if (savedUsername && savedPassword) {
      this.loginForm.username = savedUsername;
      // 解密密码
      const bytes = CryptoJS.AES.decrypt(savedPassword, this.secretKey);
      const decryptedPassword = bytes.toString(CryptoJS.enc.Utf8);
      this.loginForm.password = decryptedPassword;
      this.loginForm.remember = true;
    }
  },
  methods: {
    handleLogin() {
      if (this.loginForm.remember) {
        // 将用户名和加密后的密码保存到localStorage
        localStorage.setItem('savedUsername', this.loginForm.username);
        const encryptedPassword = CryptoJS.AES.encrypt(this.loginForm.password, this.secretKey).toString();
        localStorage.setItem('savedPassword', encryptedPassword);
      } else {
        // 清除保存的用户名和密码
        localStorage.removeItem('savedUsername');
        localStorage.removeItem('savedPassword');
      }
      // 执行实际的登录操作
      console.log('登录信息:', this.loginForm);
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 300px;
  margin: 100px auto;
}
</style>

代码说明：

• 导入 CryptoJS 库用于加密和解密操作。
• data 中定义了 loginForm 对象，包含用户名、密码和记住密码标识，以及加密所需的密钥 secretKey。
• created 钩子函数中尝试从 localStorage 中获取保存的用户名和密码，如果存在则将其赋值给 loginForm。注意在读取密码时需要进行解密操作。
• handleLogin 方法中处理登录逻辑，如果用户勾选了“记住密码”，则将用户名保存到 localStorage，并将密码加密后再保存。否则，清除保存的信息。