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加解密请求的更多相关文章
- Java中的AES加解密工具类:AESUtils
本人手写已测试,大家可以参考使用 package com.mirana.frame.utils.encrypt; import com.mirana.frame.constants.SysConsta ...
- C#与java中的AES加解密互解算法
一.C#版AES加解密算法 public class AESCode { public string Key { get; set; } public string Encrypt(string va ...
- Java中的AES加解密
直接上代码,Base64使用的是Java8的方法,如没有,替换即可 KEY:即密码 IV:即偏移量,可自订,十六位 加密方式:AES/CBC/PKCS5Padding,128位加密 如果想用256位和 ...
- AES加解密算法在Android中的应用及Android4.2以上版本调用问题
from://http://blog.csdn.net/xinzheng_wang/article/details/9159969 AES加解密算法在Android中的应用及Android4.2以上 ...
- .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 ...
- [转帖]前端 crypto-js aes 加解密
前端 crypto-js aes 加解密 2018.04.13 11:37:21字数 891阅读 59767 https://www.jianshu.com/p/a47477e8126a 原来前端也有 ...
- aes加解密前后端-后台
一.web.xml: <filter> <filter-name>fastLoginFilter</filter-name> <filter-class> ...
- DES,AeS加解密,MD5,SHA加密
1.DES一共就有4个参数参与运作:明文.密文.密钥.向量.其中这4者的关系可以理解为: 密文=明文+密钥+向量: 明文=密文-密钥-向量: 为什么要向量这个参数呢?因为如果有一篇文章,有几个词重复, ...
- c# Aes加解密和对象序列化
aes加解密 public class AesCryptto { private string key = "hjyf57468jhmuist"; private string i ...
随机推荐
- UVa 11549 Open Credit System
题意:给出n个数,找出两个整数a[i],a[j](i < j),使得a[i] - a[j]尽量大 从小到大枚举j,在这个过程中维护a[i]的最大值 maxai晚于ans更新, 可以看这个例子 1 ...
- 边框的使用,border-radius,box-shadow,border-image
<html> <head> <meta charset="UTF-8"> <title></ ...
- IOS - CoreData 增删改查
#pragma mark - Core Data Methods - (void)insertObjectWithFileName:(NSString *)fileName { /** SQL新增记录 ...
- debian系统包管理工具aptitude
注意:aptitude与 apt-get 一样,是 Debian 及其衍生系统中功能极其强大的包管理工具.与 apt-get 不同的是,aptitude在处理依赖问题上更佳一些.举例来说,aptitu ...
- Shiro:整合swagger2时需要放行的资源
filterMap.put("/swagger-ui.html", "anon"); filterMap.put("/swagger-resource ...
- unity 获取UGUI中的Text字的坐标
using System.Collections; using UnityEngine; using UnityEngine.UI; public class TextMoveHelper : Mon ...
- thinkPHP的Excel插件
原文地址 http://www.thinkphp.cn/topic/14005.html 总结的注意事项 1实例化第三方类,要在类名前加\ ,不然引用地址不对. 实现步骤:一:在http://phpe ...
- 【codeforces 794A】Bank Robbery
[题目链接]:http://codeforces.com/contest/794/problem/A [题意] 每个位置上可能有物品(>=1)或是没物品 你一开始在某一个位置b; 然后你最左可以 ...
- HDU 3073 Saving Beans
Saving Beans Time Limit: 3000ms Memory Limit: 32768KB This problem will be judged on HDU. Original I ...
- WinServer-IIS-URL重写
WEB平台安装程序在Windows Server里面才有,在WIN7里面是没有的 然后在安装一个URL重写工具 然后再设置各种规则 来自为知笔记(Wiz)