前端Aes加密、解密(crypto加密解密，前后端分离，AES加密解密)

1. 引入crypto-js插件

npm install  crypto-js -S

2. 封装加密、解密方法，可直接使用。新建crypto.js文件

import CryptoJS from 'crypto-js'

// 注意：密钥和偏移量需要前后端保持一致
const KEY = CryptoJS.enc.Utf8.parse('abc...'); // 密钥
const IV = CryptoJS.enc.Utf8.parse('abc...'); // 偏移量

/** AES加密 */
export function Encrypt(word, keyStr, ivStr) {
    let key = KEY;
    let iv = IV;

    if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });

    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}


/** AES 解密 */
export function Decrypt(word, keyStr, ivStr) {
    let key = KEY;
    let iv = IV;

    if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

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

    var decrypt = CryptoJS.AES.decrypt(src, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });

    var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.trim();
}



// 处理解密数据
// 下面这个方法外面可以直接调用，传入请求返回的加密数据
// 需要注意的是，crypto-js加密会生成不可见的一些空白unicode字符串，需要通过正则去掉不可见的区间
export function handerDecrype(options, responseText) {
    let dataObj = {};
    try {
        let { data } = JSON.parse(responseText);
        // 检查是否需要解
        if (options.needTransport && (typeof data == 'string')) {
            console.time('Decrypt');
            // 拿到处理数据
            data = Decrypt(data);
            console.timeEnd('Decrypt', new Date().getTime());

            // 去除不可见的字符
            data = JSON.parse(data.replace(/[\u0000-\u001F\u007F-\u009F]/g, ' '));
        };
        dataObj = data;
    } catch (error) {};
    return dataObj;
}

3. 外部调用

service封装层：

1. 引入

import { handerDecrype } from '../utils/crypto'

2. 使用

// options: 外部调用传进来的一些信息，例如headers，needTransport（自己定义的判断是否需要加密的属性）
// xhr.responseText: 这是请求返回的数据，dataObj处理完成之后，替换res.data，data是加密之后的数据

let dataObj = handerDecrype(options, xhr.responseText);

4. 接口调用处