场景
在开拓过程中，我们会常常会从当前系统跳转别的系统进行访问或者页面嵌套利用。
那一样平常都会给到一个地址进行参数拼接，然后去访问。那么会存在一个问题，便是地址暴露在表面参数利用明文的话会被修改，极度不屈安。
这个时候我们就考虑到加密，前端和后端协定好一种加密办法，然后前端进行参数加密传到后端，后端再去解密（可逆）。
加密办法也有很多种，本日我推举的是一款强大的前端加密/解密js库——crypto-js。
crypto-js是什么crypto-js 是一个纯 javascript 写的加密算法类库 ，可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。
GitHub：https://github.com/brix/crypto-js
安装npm install crypto-js利用
ES6模块引入方法：
import sha256 from 'crypto-js/sha256';import hmacSHA512 from 'crypto-js/hmac-sha512';import Base64 from 'crypto-js/enc-base64';
模块加载引入方法：
var AES = require("crypto-js/aes");var SHA256 = require("crypto-js/sha256");
页面标签引入方法：
<script type="text/javascript" src="path-to/bower_components/crypto-js/crypto-js.js"></script><script type="text/javascript"> var encrypted = CryptoJS.AES(...); var encrypted = CryptoJS.SHA256(...);</script>项目中利用实例
这里我以 React作为例子，其他的也就大同小异了。
第一步：封装工具类
我们可以写一个工具类，专门封装加密解密的方法，比如我新建一个cryptoAES.js的文件，放在utils 目录下（放哪无所谓），代码如下：
const CryptoJS = require('crypto-js'); //引用AES源码js const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六进制数作为密钥偏移量//解密方法function (word) { let encryptedHexStr = CryptoJS.enc.Hex.parse(word); let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr); let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8); return decryptedStr.toString();}//加密方法function Encrypt(word) { let srcs = CryptoJS.enc.Utf8.parse(word); let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encrypted.ciphertext.toString().toUpperCase();}export default { Decrypt , Encrypt}
上面的代码中的 key 是密钥 ，iv 是密钥偏移量，这两个参数前后端协定好保持同等，相称是我们的小秘密，不能见告别人[闭嘴]，不然加密的意义就没了。
值得把稳的是密钥的长度，由于对称解密利用的算法是 AES-128-CBC算法，数据采取 PKCS#7 添补 ， 因此这里的 key 须要为16位！
接着我们定义了 解密方法Decrypt 和 加密方法 Encrypt ，末了通过 export 和default 将其暴露出去，方便在须要的时候进行引入....
工具类写好了，很大略，然后是怎么利用了~
第二步：利用工具类
我们有一个index.tsx文件，在这里面利用加密和解密的方法。
这里我只演示加密，解密同理。
import { Decrypt, Encrypt } from '/utils /cryptoAES.js';..//比如我组装好了拼接的参数const str = '103170,112425366,253.00,20210428173700'Encrypt(str)
加密后的结果是：
hoDfJ9U+uY+v8wYKdudbTUR+Z7g1Ui9YraVhfD9g2fMipYlFxnoLE0qbf+YsnEuk
这里有个问题，加密后的字符串里面是包含了+号，发送的话，在进行地址解析时，会把 + 号转换为 空格， 直接导致参数不能精确传输，以是我们用到了JS的encodeURIComponent()，将所有的 + 号 手动转换为 %2B 即可正常传输。
encodeURIComponent(str)//返回新结果hoDfJ9U%2BuY%2Bv8wYKdudbTUR%2BZ7g1Ui9YraVhfD9g2fMipYlFxnoLE0qbf%2BYsnEuk
好了，一个大略的前端加密的过程就写完了。
总结利用加密的场景有很多，我这里只讲述了URL地址加密的场景，大略总结下：
第一步：安装crypto-js
第二步：引入crypto-js
第三步：封装工具类（当然也可以直策应用）
第四步：调用工具类
第五步：利用encodeURIComponent方法转码，然后拼接
当然，这个是最根本的用法，想深入可查看官方文档！
结尾：希望小凡的每篇文章对你都有所帮助！
关注我，一起学习进步
