Vue中结合后端实现AES加解密操作（最新）

1、安装对应的包

终端执行命令安装对应的 crypto.js 包

npm install crypto-js --save

2、添加工具类

在  utils  文件夹下创建 secret.js 文件，放入以下内容：

const CryptoJS = require('crypto-js');  //引用AES源码js


// const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
// const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六进制数作为密钥偏移量

//解密方法
export function Decrypt(word,keys) {
/* 注意 key 和 iv 一般是后端接口给出，这里用到的场景是key和iv相等 */
    const key = CryptoJS.enc.Utf8.parse(keys);
    const iv = key;
    // let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let encryptedHexStr = CryptoJS.enc.Base64.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.ZeroPadding });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    // return decryptedStr.toString();
    return decryptedStr;
}

//加密方法
export function Encrypt(word,keys) {
/* 注意 key 和 iv 一般是后端接口给出，这里用到的场景是key和iv相等 */
    const key = CryptoJS.enc.Utf8.parse(keys);
    const iv = key;
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    // return encrypted.ciphertext.toString().toUpperCase();
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

3、调试过程：

由于开发中写后台的老哥是用的 java ，它那里的加密类中偏移量 padding 没有 Pkcs7，在多次尝试后我们组合出了后台用 NoPadding 加密，前台用ZeroPadding 解密的方式，其他方式均有不同的错误，常见的是解密后多出很多空格等等。

//解密方法：
padding: CryptoJS.pad.ZeroPadding;

4、使用工具类

1、在页面中引入：

import { Decrypt } from "@/utils/secret.js";

2、获取需要的参数直接使用解密方法：

let key = "XXX";
let iv = "XXX";
let sercit = "XXX" //后台获取的密文
//进行解密
let result = Decrypt(key,sercit);

如果觉得内容对自己有帮助，请点赞哦，谢谢。