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);
}

　　配置完成，接下來就是正式的調用了。

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