前端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. 接口调用处

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值