密码加密

1.安装CryptoJS

打开终端输入 npm install crypto-js

2.新建asc.js文件并引入crypto-js

import CryptoJS from 'crypto-js'

// 需要和后端一致

const KEY = CryptoJS.enc.Utf8.parse('888');
const IV = CryptoJS.enc.Utf8.parse('888');

export default {

  /**
   * 加密
   * @param {*} word
   * @param {*} keyStr
   * @param {*} ivStr
   */
  encrypt (word, keyStr, ivStr) {
    let key = KEY;
    let iv = IV;
    if (keyStr) {
      key = CryptoJS.enc.Utf8.parse(keyStr);
      iv = CryptoJS.enc.Utf8.parse(ivStr);
    }
    let srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding
    });
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
  },

  /**
   * 解密
   * @param {*} word
   * @param {*} keyStr
   * @param {*} ivStr
   */
  decrypt (word, keyStr, ivStr) {
    let key = KEY;
    let iv = IV;

    if (keyStr) {
      key = CryptoJS.enc.Utf8.parse(keyStr);
      iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let base64 = CryptoJS.enc.Base64.parse(word);
    let src = CryptoJS.enc.Base64.stringify(base64);

    let decrypt = CryptoJS.AES.decrypt(src, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding
    });

    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  }
}

3.在登录页中使用

先引入asc文件

在提交的时候密码调用asc.encrypt(密码)方法即可

记住密码

提交表单时判断记住密码是否被选中，如果选中则把密码保存到长期存储里

// 保存缓存密码
    saveLocalPassword() {
      localStorage.setItem("localPassword", JSON.stringify(this.userForm));
    },

否则移除

localStorage.removeItem('localPassword')

等下次进入时则会在created调用密码缓存方法，有则把密码回显出来

// 获取缓存密码
    getLocalPassword() {
      this.isRemenberPassword = false;
      let form = JSON.parse(localStorage.getItem("localPassword"));
      if (form) {
        this.isRemenberPassword = true;
        this.userForm = form;
      }
    },

enter进入系统

// 按enter登录
  mounted() {
    window.addEventListener(
      "keydown",
      (e) => {
        if (e.key == "Enter") {
          this.submitForm("userForm");
        }
      },
      true
    );
  },
  beforeDestroy() {
    window.removeEventListener(
      "keydown",
      (e) => {
        if (e.key == "Enter") {
          this.submitForm("userForm");
        }
      },
      true
    );
  },