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

2023-12-14 19:55:25
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. 接口调用处

文章来源:https://blog.csdn.net/weixin_58031521/article/details/134927037
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。