Vue如何使用AES做好加解密，怎么规避加解密遇到的坑？

对于前端加解密，最近笔者了解到大多数人都是用的AES方式，在这里只需要引入小小的插件即可“Crypto.JS”,

执行命令：npm install --save_dev crypto-js

1. 与后台的交互，首先需要确定后台 aes 采用的算法，我的项目中采用的是AES/ECB/PKCS5Padding “算法/模式/补码方式”，因此 js 中也要采用同样的算法，不然前端跟后台无法通信。
2. 确定好了加密方式之后，js 引入库文件时。只引入 aes.js 的话，采用 CBC模式不会有问题，可是采用 ECB 模式会报错，需要额外引入另外2个js文件 ，mode-ecb-min.js 
   pad-nopadding-min.js
3. 官方示例, 每次输出的密文都不一样，CryptoJS.AES.encrypt(“Message”, “Secret Passphrase”)，需要先自己转换一下

// 导入 crypto-js 包 
const CryptoJS = require('crypto-js'); 
// 定义加/解密的 key(key都放这里了, 加密还有啥意义!^_^) 
const initKey = '  [email protected] #'; 
// 设置数据块长度 
const keySize = 128;/** 
* 生成密钥字节数组, 原始密钥字符串不足128位, 补填0. 
* @param {string} key - 原始 key 值 
* @return Buffer 
*/ 
const fillKey = (key) => { 
const filledKey = Buffer.alloc(keySize / 8); 
const keys = Buffer.from(key); 
if (keys.length < filledKey.length) { 
filledKey.map((b, i) => filledKey[i] = keys[i]); 
}return filledKey; 
}/** 
* 定义加密函数 
* @param {string} data - 需要加密的数据, 传过来前先进行 JSON.stringify(data); 
* @param {string} key - 加密使用的 key 
*/ 
const aesEncrypt = (data, key) => { 
/** 
* CipherOption, 加密的一些选项: 
* mode: 加密模式, 可取值(CBC, CFB, CTR, CTRGladman, OFB, ECB), 都在 CryptoJS.mode 对象下 
* padding: 填充方式, 可取值(Pkcs7, AnsiX923, Iso10126, Iso97971, ZeroPadding, NoPadding), 都在 CryptoJS.pad 对象下 
* iv: 偏移量, mode === ECB 时, 不需要 iv 
* 返回的是一个加密对象 
*/ 
const cipher = CryptoJS.AES.encrypt(data, key, { 
mode: CryptoJS.mode.ECB, 
padding: CryptoJS.pad.Pkcs7, 
iv: '', 
}); 
// 将加密后的数据转换成 Base64 
const base64Cipher = cipher.ciphertext.toString(CryptoJS.enc.Base64); 
// 处理 Android 某些低版的BUG 
const resultCipher = base64Cipher.replace(//+/g,'-').replace(g,'_'); 
// 返回加密后的经过处理的 Base64 
return resultCipher; 
}/** 
* 定义解密函数 
* @param {string} encrypted - 加密的数据; 
* @param {string} key - 加密使用的 key 
*/ 
const aesDecrypt = (encrypted, key) => { 
// 先将 Base64 还原一下, 因为加密的时候做了一些字符的替换 
const restoreBase64 = encrypted.replace(//-/g,'+').replace(/_/g,'/'); 
// 这里 mode, padding, iv 一定要跟加密的时候完全一样 
// 返回的是一个解密后的对象 
const decipher = CryptoJS.AES.decrypt(restoreBase64, key, { 
mode: CryptoJS.mode.ECB, 
padding: CryptoJS.pad.Pkcs7, 
iv: '', 
}); 
// 将解密对象转换成 UTF8 的字符串 
const resultDecipher = CryptoJS.enc.Utf8.stringify(decipher); 
// 返回解密结果 
return resultDecipher; 
} 
// 获取填充后的key 
const key = CryptoJS.enc.Utf8.parse(fillKey(initKey));// 定义需要加密的数据 
const data = {"password":"  [email protected] #","userName":"  [email protected] "}; 
// 调用加密函数 
const encrypted = aesEncrypt(JSON.stringify(data), key); 
// 调用解密函数 
const decrypted = aesDecrypt(encrypted, key); 
// 控制台输出查看结果 
console.log('加密结果: ', encrypted); 
console.log('解密结果: ', decrypted); 

最后可以在 node 环境下运行查看一下结果:

$ node crypto.js 

注意掉过得坑：

关于加密时同一明文在加密时每次加密密文不一样的情况，这是由于偏移量设置问题，应该是IV没有设置加密接口默认了随机偏移量，不影响解密。

关于解密是返回为空白，这是由于KEY要求为128位，密匙如果不足128位将出现解密不成功的情况。