首页 > 代码库 > 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); }
配置完成,接下来就是正式的调用了。
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加解密请求
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。