vue AES加密(URLEncode加密)

目录

第一步：安装crypto-js

第二步：新建一个crypto.js文件

第三步：在需要的地方引入

第四步：AES加密+URLEncode加密

第五步：AES解密+URLEncode解密

---

第一步：安装crypto-js

//安装
npm install crypto-js --save-dev

第二步：新建一个crypto.js文件

import CryptoJS from 'crypto-js';
 
export default {
    //随机生成指定数量的16进制key
    generatekey(num) {
        let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let key = "ABCDEF0123456789";
        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 : 'ABCDEF0123456789'; //判断是否存在ksy，不存在就用定义好的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 : 'ABCDEF0123456789';
        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();
    }
 
}

第三步：在需要的地方引入

import AES from "../tools/crypto";

第四步：AES加密+URLEncode加密

 
      //链接参数为：http://www.baidu.com?idcard=11111111&name=测试&aa=11
      /* 
      第一步：开始加密以下字符串：idcard=11111111&name=测试
       */
      let str = "idcard=11111111&name=测试";
     
      var encrypts = AES.encrypt(str);     
      // var encrypts = AES.encrypt(JSON.stringify(str));//json字符串
      console.log(encrypts);//AES（ECB）加密后：t8AAHi7+1sZSqpgWvxymARPpClXIshZCPcYBfMzugeQ= 
      /*
      第二步：对AES（ECB）加密后参数进行URLEncode:
        */
      let data= encodeURIComponent(encrypts)
      console.log(data);//t8AAHi7%2B1sZSqpgWvxymARPpClXIshZCPcYBfMzugeQ%3D
      /* 
      第三步：完整的url为:http://www.baidu.com?kdParam=t8AAHi7%2B1sZSqpgWvxymARPpClXIshZCPcYBfMzugeQ%3D
      */

第五步：AES解密+URLEncode解密

   //URL地址:http://www.baidu.comkdParam=t8AAHi7%2B1sZSqpgWvxymARPpClXIshZCPcYBfMzugeQ%3D
      /* 
      第一步：获取url路径
       */ 
      let query = this.$route.query.kdParam;
     /* 
     第二步：对AES参数进行URLEncode解密:
      */
      let data = decodeURIComponent(query);
      console.log(data);//t8AAHi7+1sZSqpgWvxymARPpClXIshZCPcYBfMzugeQ= 
      /* 
      第三步：AES解密
      */
      var dess = AES.decrypt(data);
      console.log(dess);//idcard=11111111&name=测试
      /* 
     第四步： 解构参数的值 
      */
      var keyValue = dess.split("&");
      console.log(keyValue);//['idcard=11111111', 'name=测试']
      var obj = {};
      for (var i = 0; i < keyValue.length; i++) {
        var item = keyValue[i].split("=");
        var key = item[0];
        var value = item[1];
        obj[key] = value;
      }
      console.log(obj);//{idcard: '11111111', name: '测试'}