前端使用ASE加密(AES/CBC/PKCS5Padding）

  前端项目中遇到需要对参数进行AES/CBC/PKCS5Padding加密，然后传给后台解密,将实现方法记录下。

第一步安装crypto-js

在vue项目终端中输入下面命令安装插件

npm install crypto-js --save-dev

第二步新建工具类utils.js

在工具类中引用crypto-js

import CryptoJS from "crypto-js";

加密

export function Encrypt(word) {
        let key = '密钥要后后台一致';
        let iv = '偏移量要个后台一致';
        
        key = CryptoJS.enc.Utf8.parse(key);
        iv = CryptoJS.enc.Utf8.parse(iv);
        
        let srcs = CryptoJS.enc.Utf8.parse(word);
        // 加密模式为CBC，补码方式为PKCS5Padding（也就是PKCS7）
        let encrypted = CryptoJS.AES.encrypt(srcs, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
        });

        //返回base64
        return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}

解密

export function Decrypt(word) {

        let key = '密钥要后后台一致';
        let iv = '偏移量要个后台一致';

        key = CryptoJS.enc.Utf8.parse(key);
        iv = CryptoJS.enc.Utf8.parse(iv);

        let base64 = CryptoJS.enc.Base64.parse(word);
        
        let src = CryptoJS.enc.Base64.stringify(base64);

        // 解密模式为CBC，补码方式为PKCS5Padding（也就是PKCS7）
        let decrypt = CryptoJS.AES.decrypt(src, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
        });

        let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
        return decryptedStr.toString();

}

第三步使用

在需要的界面引用utils.js

import { Encrypt, Decrypt} from '../utils'

使用代码

 //aes加密
 let aesParams = Encrypt('a');
 //解密
 let aesParams1 = Decrypt('a');
 ``