引言

　　在我们使用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加解密请求

引言

让我们开始吧

附录

最新文章

热门文章