引言

  在我们使用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. 验证码模拟登录TestHome

    前面我们做了一个xsrf的知乎的模拟登录,那么今天将会给大家分享一下小弟写的一段带验证码的登录脚本.   今天我们要做的是testerhome的模拟登录,在做这个模拟登录的时候,我发现需要验证码才能登 ...

  2. offscreen-render

    offscreen-render 什么是offscreen-render?offscreen-render涉及的内容比较多,有offscreen-render那就有onscreen render,on ...

  3. Sublime 是自动检测而非自动设置缩进

    以为是自动设置规范化的缩进 以前一直认为是:识别出文件类型后,设置统一的缩进规范.比如说 识别为CSS,就把缩进设成2个空格 其实是自动检测然后与你保持统一 亲测发现,根据你文本里用的是几个空格的缩进 ...

  4. Linux中删除特殊符号文件名文件

    Linux 系统下的文件名长度最多可到256个字符.通常情况下,文件名的字符包括:字母.数字.“.”(点).“_”(下划线)和“-”(连字符). Linux 允许在文件名中使用除上述符号之外的其它符号 ...

  5. Java中使用MD5加密的简单实现

    import java.math.BigInteger; import java.security.MessageDigest; import java.security.NoSuchAlgorith ...

  6. struts2解决动态多文件上传的问题(上传文件与数据库字段一一对应)(转)

    struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...

  7. JS侧边栏实现

    <!DOCTYPE html> <html lang="en"> <style> </style> <head> < ...

  8. vue中的生命周期

    vue中的生命周期 1,vue生命周期简介: 1.beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用.   2.created 实例已经创建完成之后被调 ...

  9. http响应的封装

    响应的封装: 资源的初始化 分析请求响应信息,根据状态响应码,发送不同的状态码 浏览器根据状态信息,做出不同的执行 构建正文,也就是根据浏览器客服端的请求发送响应信息: 发送响应:code 是状态码, ...

  10. POJ 3749

    第一道简单密码学的题,太水了,本不打算做,第一道,还是纪念一下. #include <iostream> #include <cstdio> #include <cstr ...