首页 > 代码库 > React中的AES加解密请求

React中的AES加解密请求

引言

  在我们使用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的基本上也都能知道和了解。

React中的AES加解密请求