vue登录页实现记住密码功能

实现思路

用户登录时若勾选“记住密码”功能选项，则将登录名和密码（加密后）保存至本地缓存中，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中。

存储账号密码

存储账号密码有多种方法，我这里使用的 localStorage存储信息

功能页面

<div class="tip" style="margin-left:50px;margin-top:10px;">
    <el-checkbox v-model="checked" class="rememberMe">记住我</el-checkbox>
</div>

密码加密

为提高安全性，可以在存储信息前将密码进行加密处理

我这里使用的是base64

//安装
npm install --save js-base64
//引入
const Base64=require("js-base64").Base64

mounted() {
    //获取存储的用户名
    let username=localStorage.getItem('username')
    if(username){
      //如果用户名存在,将值赋给登录表单
      this.ruleForm.username=localStorage.getItem('username')
      this.ruleForm.password=Base64.decode(localStorage.getItem('password'))  //base解密
      this.checked=true
    }  
  },
  methods: {
    async register() {
      let {
        data: { code, msg, token, tlist, username },
      } = await this.$axios.post("/gouser", this.ruleForm);
      if (code == 200) {

        if(this.checked){
          //点击记住密码,将密码进行加密
          let password=Base64.encode(this.ruleForm.password)  //base加密
          //将用户名和密码存入本地存储
        localStorage.setItem('username',this.ruleForm.username)
        localStorage.setItem('password',password)
        }else{
          //取消记住密码,清除用户名和密码
          localStorage.removeItem('username')
          localStorage.removeItem('password')
        }

        this.$message.success(msg);
      } else {
        this.$message.error(msg);
      }
    },

完成记住密码功能