React中的AES加解密请求

Posted 2020-08-20 JaminHuang

引言

　　在我们使用React开发Web前端的时候，如果是比较大的项目和正常的项目的话，我们必然会用到加解密，之前的文章中提到.NET的一些加解密，那么，这里我就模拟一个例子：

　　1.后台开发API接口，但API接口需要加密请求，或者需要解密输出参数

　　2.前端使用React开发web调用API接口

让我们开始吧

　　那么针对于上述问题，我们可以使用"crypto-js"组件，具体使用方式可以去GitHub上搜索相应的组件，本文例子使用使用AES的方法进行加解密，结束上述需求

　　当我们引用组件后，那么我们就可以配置公共方法组件：

import * as CryptoJS from \'crypto-js\';

let AuthTokenKey = "XXX"; //AES密钥
let AuthTokenIv = \'XXX\'; //AES向量

/*AES加密*/
export function Encrypt(data) {
    let dataStr = JSON.stringify(data);
    let encrypted = CryptoJS.AES.encrypt(dataStr, CryptoJS.enc.Latin1.parse(AuthTokenKey), {
        iv: CryptoJS.enc.Latin1.parse(AuthTokenIv),
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
}

/*AES解密*/
export function Decrypt(data) {
    let data2 = data.replace(/\\n/gm, "");
    let decrypted = CryptoJS.AES.decrypt(data2, CryptoJS.enc.Latin1.parse(AuthTokenKey), {
        iv: CryptoJS.enc.Latin1.parse(AuthTokenIv),
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

aes.js

　　配置完成，接下来就是正式的调用了。

import { Encrypt, Decrypt } from \'./aes\';

......

let data = { body : Encrypt({gatherType: gatherType})};
        Request.FetchPost("api/Gather/GetSignCount", data).then(json=>{
            if (条件) {
                //执行
            }
            else {
                //执行
            }
        });

附录

　　本文只是最简单的例举了一些引用和调用的方式，当然在AES加密的方法上还要匹配填充模式等等，这里就不是React的范畴了（而是需要跟API接口后端写的加密方式对应匹配啦），会用AES的基本上也都能知道和了解。