Ⅰ、AES 加密：

1、使用 AES 加密前的准备工作：

其一、安装 crypto-js ：

A、安装命令：

npm install crypto-js

B、成功安装后的截图：

// 在 package.json 文件内有安装后的依赖(但版本不一定是 ^4.2.0);

2、实现 AES 加密的方式一：

其一、在项目中创建 crypto.js 文件：

A、crypto.js 文件位置截图为：

B、代码为：

 
 
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 : "ylvector12345678"; //判断是否存在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 : "ylvector12345678";
    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();
  }
};

其二、在页面中引入并使用：

A、在页面引入 crypto-js 文件：

// 注意：以实际引入的 crypto-js 文件地址为主;

B、使用的加密解密的过程：

a、随机十六位密匙的加密解密操作：

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

    // const decrypt = Crypto.decrypt(encrypts, 'ylvector12345678');
    const decrypt = Crypto.decrypt(encrypts, keys);


    console.log(username.value,1111111)
    console.log(encrypts,222222)
    console.log(decrypt,333333333);

b、随机十六位密匙的加密解密截图：

// 截图一：此时随机产生的生成值，不是固定值为：rKAq5sr4UrRdmDAr+8epHA==

// 截图二：此时随机产生的生成值，不是固定值为：3BVfDdolhXyB1E79iBQUzA==

c、固定十六位密匙的加密解密操作：

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

     const decrypt = Crypto.decrypt(encrypts, 'ylvector12345678');
     // const decrypt = Crypto.decrypt(encrypts, keys);


     console.log(username.value,1111111)
     console.log(encrypts,222222)
     console.log(decrypt,333333333);

d、固定十六位密匙的加密解密截图：

// 此时无论怎么生成，固定的生成值为：zweKZ45kJyI6HASVc8DQSQ==

3、实现 AES 加密的方式二：

其一、在项目中创建 crypto.js 文件：

A、crypto.js 文件位置截图为：

B、代码为：

 
 
import CryptoJS from "crypto-js";
 
export default {
  //加密
  encode(str = ''){
    // utf-8 转换
    let message = CryptoJS.enc.Utf8.parse(str);
    let secret_key = CryptoJS.enc.Utf8.parse("12345678ABCDEFGH");
    let iv = CryptoJS.enc.Utf8.parse("ABCDEFGH12345678");
    // Encrypt
    var ciphertext = CryptoJS.AES.encrypt(message, secret_key, { 
        iv: iv,
        mode: CryptoJS.mode.CBC, 
        padding: CryptoJS.pad.Pkcs7
    });
    return ciphertext.toString();
  },
  
  //解密
  decode(str = ''){
    // utf-8 转换
    let message = str;
    let secret_key = CryptoJS.enc.Utf8.parse("12345678ABCDEFGH");
    let iv = CryptoJS.enc.Utf8.parse("ABCDEFGH12345678");
    
    // Decrypt
    var ciphertext  = CryptoJS.AES.decrypt(message.toString(), secret_key,{
        iv: iv,
        mode: CryptoJS.mode.CBC, 
        padding: CryptoJS.pad.Pkcs7 
    });
    return ciphertext.toString(CryptoJS.enc.Utf8);
  }
};

其二、在页面中引入并使用：

A、在页面引入 crypto-js 文件：

// 注意：以实际引入的 crypto-js 文件地址为主;

B、使用的加密解密的过程：

a、固定十六位密匙的加密解密操作：

     // 用AES给密码加密
     const encrypts = Crypto.encode(username.value);

     // 用AES给密码解密
     const decrypt = Crypto.decode(encrypts);

     console.log(username.value,1111111)
     console.log(encrypts,222222)
     console.log(decrypt,333333333);

b、固定十六位密匙的加密解密截图：

// 此时无论怎么生成，固定的生成值为：SeaNt1TTsdmvw7u24Q99Ng==

Ⅱ、寄语：

非常荣幸能作为该文章专栏的博主，关于上述问题不懂的可以随时滴滴，一定会及时回复；