引言

  在我们使用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. WCF(一)控制台寄宿

    WCF是微软开发的一款通信框架.具有跨平台跨操作系统的特点,所以,WCF一般用于开发第三方接口或者在分布式系统用做数据交互. WCF三要素分别是地址(Address).绑定(Binding).契约(C ...

  2. HDU 1203 I NEED A OFFER!【01背包】

    解题思路:攒下的钱n相当于包的容量,然后是m个学校的申请费用,申请费用相当于每一个物品的消耗,得到offer的概率相当于每一个物品的价值. 因为要求的是至少得到一份0ffer的概率的最大概率,可以转化 ...

  3. underscore的简单了解

    1.underscore:一个封装好的js工具库,它提供了一整套函数式编程的使用功能,但是没有扩展任何js内置对象.它解决了这个问题:如果我面对一个空白的HTML,并希望立即开始工作,我需要什么? 2 ...

  4. java中的string trim具体有什么用处。。。

    去掉字符串首尾空格 防止不必要的空格导致错误public class test{ public static void main(String[] args) { String str = " ...

  5. PHP SOAP如何传入复杂对象

    Paymentexpress有一个SOAP服务方法Check3dsEnrollment(String username,String password, EnrolmentCheckRequest t ...

  6. 禁止浏览器缓存input值

    如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocomplete="off"; <input type="te ...

  7. Python字典嵌套

    import copy menu = { "计算机科学与技术":{ "程序编程":{ "传统语言":{ "C++":&q ...

  8. Struts(19)Struts集成

    Struts2 MVC架构 模型视图控制器(Model View Controller)或MVC,MVC是俗称.是一种软件设计模式,用于开发Web应用程序.模型 - 视图 - 控制器模式是由下面三个部 ...

  9. struts.xml中出现extends undefined package struts-default解决的方法

    在struts.xml中出现extends undefined package struts-default,经过查阅资料原来是由于没有联网的缘故. 这样解决:在myeclipse中关联本地的dtd文 ...

  10. 强名称程序集(strong name assembly)——为程序集赋予强名称

    ,唯一标识一个程序集 2,放置程序集被仿冒和被篡改. 3,能够部署到全局程序集缓存(GAC:GlobalAssembly Cache)中:在将强名称程序集不熟在GAC其中以后,强名称程序集也能够称为共 ...