前端在登录时如何将用户密码加密

之前用到的是md5，但是最近发现有个新的加密方法AES，和后台沟通后，便拿来试了试。

首先在项目文件夹中创建AES.js，js代码如下：

// npm i crypto-js --save下载先,然后引包

import CryptoJS from "crypto-js";

export default {
  //随机生成指定数量的16进制key
  generatekey(num) {
    let library =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let key = "";
    for (var i = 0; i < num; i++) {
      let randomPoz = Math.floor(Math.random() * library.length);
      key += library.substring(randomPoz, randomPoz + 1);
    }
    return key;
  },

  //加密
  encrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : "123456{saltZX}.."; //判断是否存在key，不存在就用定义好的key
    var key = CryptoJS.enc.Utf8.parse(keyStr);
    var srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
  },
  //解密
  decrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : "abcdsxyzhkj12345";
    var key = CryptoJS.enc.Utf8.parse(keyStr);
    var decrypt = CryptoJS.AES.decrypt(word, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
  }
};

然后在需要的页面引入AES.js文件：

import AES from "../../src/uitls/AES";

我这里是在登录时用到的，具体操作如下：

 // 用AES给密码加密
 const keys = AES.generatekey(16);
 //如果是对象/数组的话，需要先JSON.stringify转换成字符串，第二个值是加密的方式key
 const encrypts = AES.encrypt(that.loginForm.password,'123456{saltZX}..');


 let params = {
          username: that.loginForm.username,
          password: encrypts,
   };
// 到这里在用户提交登录的时候把params提交过去就好啦！

我们再来看看具体效果：

{

1. password: "yktfmgc8jZ2OjmjHNvp75g=="
2. username: "admin"

}

至此，搞定啦！！！