Vue项目：后台管理系统登录页的记住密码的功能如何实现？

1、需求描述

当在做后台管理系统时，经常需要做到点击记住密码，然后登录进入系统后，一番操作后退出系统希望能够自动的记住上次登录的账号密码，这个功能实现并不算复杂。

图片.png

2、过程分析

记住密码的选项的值动态的绑定一个checked值，这个值默认为false，当选中的时候才去赋予一个true值，然后通过这个值当登录将账号密码提交的时候，根据checked的布尔值将账号密码存到本地存储中，如果为true则存账号密码，如果为false，则存个空对象进去。当用户操作完退出登录时，会退到登录页，此时会执行一次login组件的生命周期，就可以在生命周期中将本地存的值再次重新赋予到登录页的表单中去，这样就实现了登录时记住密码的功能。

3、代码描述

3.1、子组件(loginBox登录表单组件)：

3.1.1、登录的表单

3.1.2、从父组件接收过来的数据
loginForm：表单的账号密码的数据，hasChecked：是否选择记住密码

props: ["loginForm", "hasChecked"],

3.1.3、登录表单的校验

data() {
    const checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("账号不能为空"));
      } else if (!/^[a-zA-Z0-9]{0,20}$/.test(value)) {
        callback(new Error("格式不正确"));
      } else {
        callback();
      }
    };
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (!/^[a-zA-Z0-9]{6,32}$/.test(value)) {
        callback(new Error("格式不正确"));
      } else {
        callback();
      }
    };
    return {
      labelPosition: "right",
      checked: false,
      // 登录表单校验
      rules: {
        name: [{ required: true, validator: checkName, trigger: "blur" }],
        password: [
          { required: true, validator: checkPassword, trigger: "blur" },
        ],
      },
    };
  },

3.1.4、深度监听登录表单form
主要是监听退回登录页时，看表单页的数据是否填充，如果有数据填充，触发监听，并且执行init()初始化表单的方法。

watch: {
    infoForm: {
      handler(val) {
        if (val && Object.keys(val).length > 0) {
          this.init();
        }
      },
      immediate: true,
      deep: true,
    },
  },

3.1.5、init初始化
将选项布尔值重新赋值

    // 初始化登录信息
    init() {
      this.checked = this.hasChecked;
    },

3.2、父组件(整个登录首页)：

3.2.1、子组件的引入

      
      

      import LoginBox from "./loginBox.vue";
      
      components: {
        LoginBox,
      },

3.2.2、判断本地缓存中是否有数据，有的话那么就在生命周期中去给表单项进行赋值操作

  data() {
    return {
      checked: false,
      loginForm: {},
    };
  },
  mounted() {
    if (localStorage.getItem("loginForm")) {
      this.checked = true;
      this.loginForm = JSON.parse(localStorage.getItem("loginForm"));
    }
  },

3.2.4、提交按钮进行的逻辑操作
这部分需要判断是否选择了记住密码，如果勾选了，那么就将当前的账号密码存入，如果没有，那么就存入个空对象，一方面清空之前存入的账号密码，另一方面保证了下次登录不会带入数据。

success() {
      postLogin({
        userName: this.loginForm.name,
        password: md5(this.loginForm.password),
      }).then((res) => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "登录成功!",
            duration: "1000",
          });
          // 存token
          setToken(res.data.token);
          //存用户信息
          setUserInfo(res.data);
          sessionStorage.setItem("userInfo", JSON.stringify(res.data));
          // 判断是否记住密码
          if (this.checked) {
            localStorage.setItem("loginForm", JSON.stringify(this.loginForm));
          } else {
            localStorage.setItem("loginForm", JSON.stringify({}));
          }
          this.$router.push("/index");
        }
      });
    },

3.2.5、保存用户设置的方法
这个方法是去保存用户是否勾选了记住密码的

    hasCheck(val) {
      // 将用户的选择进行赋值
      this.checked = val;
    },

最后大致的功能就实现了，当然为了安全性，最好在存入本地之前进行md5加密（其他的加密也行，比如：AES加密），然后在生命周期去赋值的时候再去进行解密赋值到表单项上去，这样安全性就提升了。