引言

  在我们使用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加解密请求的更多相关文章

  1. Java中的AES加解密工具类:AESUtils

    本人手写已测试,大家可以参考使用 package com.mirana.frame.utils.encrypt; import com.mirana.frame.constants.SysConsta ...

  2. C#与java中的AES加解密互解算法

    一.C#版AES加解密算法 public class AESCode { public string Key { get; set; } public string Encrypt(string va ...

  3. Java中的AES加解密

    直接上代码,Base64使用的是Java8的方法,如没有,替换即可 KEY:即密码 IV:即偏移量,可自订,十六位 加密方式:AES/CBC/PKCS5Padding,128位加密 如果想用256位和 ...

  4. AES加解密算法在Android中的应用及Android4.2以上版本调用问题

     from://http://blog.csdn.net/xinzheng_wang/article/details/9159969 AES加解密算法在Android中的应用及Android4.2以上 ...

  5. .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转

    .net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...

  6. [转帖]前端 crypto-js aes 加解密

    前端 crypto-js aes 加解密 2018.04.13 11:37:21字数 891阅读 59767 https://www.jianshu.com/p/a47477e8126a 原来前端也有 ...

  7. aes加解密前后端-后台

    一.web.xml: <filter> <filter-name>fastLoginFilter</filter-name> <filter-class> ...

  8. DES,AeS加解密,MD5,SHA加密

    1.DES一共就有4个参数参与运作:明文.密文.密钥.向量.其中这4者的关系可以理解为: 密文=明文+密钥+向量: 明文=密文-密钥-向量: 为什么要向量这个参数呢?因为如果有一篇文章,有几个词重复, ...

  9. c# Aes加解密和对象序列化

    aes加解密 public class AesCryptto { private string key = "hjyf57468jhmuist"; private string i ...

随机推荐

  1. (转)硬盘结构,主引导记录MBR,硬盘分区表DPT,主分区、扩展分区和逻辑分区,电脑启动过程

    硬盘结构硬盘有很多盘片组成,每个盘片的每个面都有一个读写磁头.如果有N个盘片.就有2N个面,对应2N个磁头(Heads),从0.1.2开始编号.每个盘片的半径均为固定值R的同心圆再逻辑上形成了一个以电 ...

  2. P3376 【模板】网络最大流(luogu)

    P3376 [模板]网络最大流(luogu) 最大流的dinic算法模板(采取了多种优化) 优化 时间 inline+当前弧+炸点+多路增广 174ms no 当前弧 175ms no 炸点 249 ...

  3. python位操作(进制)与ascii

    位操作符 位操作的操作符与python的set的操作符一样.与C语言中的位操作符也是一样的. a = 60 #60的二进制为 0011 1100b = 13 #13的二进制为 00001101 c = ...

  4. ZOJ 1081 Points Within( 判断点在多边形内外 )

    链接:传送门 题意:给出n个点围成的一个多边形,现在有m个点p,询问p是否在多边形内,你可以认为这些点均不同且输入的顶点是多边形中相邻的两个顶点,最后的顶点与第一个相邻并且每一个顶点都连接两条边( 左 ...

  5. 【【henuacm2016级暑期训练】动态规划专题 E】Destroying Roads

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 首先. 这张图是无向无权图. 因此任意两点之间的最短路可以通过N^2的bfs轻易算出来. 即得到d[N+10][N+10] 考虑s[ ...

  6. HDU——T 1054 Strategic Game

    http://acm.hdu.edu.cn/showproblem.php?pid=1054 Time Limit: 20000/10000 MS (Java/Others)    Memory Li ...

  7. 洛谷 P1529 回家 Bessie Come Home

    P1529 回家 Bessie Come Home 题目描述 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出 ...

  8. 怎样用批处理来执行多个exe文件

    怎样用批处理来运行多个exe文件 @echo off start *****.exe start *****.exe start *****.exe start *****.exe 接着我们就能够运行 ...

  9. 根据数据库表结构生成java类

    import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWrit ...

  10. bzoj2229: [Zjoi2011]最小割(分治最小割+最小割树思想)

    2229: [Zjoi2011]最小割 题目:传送门 题解: 一道非常好的题目啊!!! 蒟蒻的想法:暴力枚举点对跑最小割记录...绝对爆炸啊.... 开始怀疑是不是题目骗人...难道根本不用网络流?? ...