做外贸推广自己网站,企业网站源码去一品资源网,手机上如何做微电影网站,湖北田源建设工程有限公司网站背景
前段时间公司做项目#xff0c;该项目涉及到的敏感数据比较多#xff0c;经过的一波讨论之后#xff0c;决定前后端进行接口加密处理#xff0c;采用的是 AES BASE64 算法加密~
网上关于 AES 对称加密的算法介绍看上一篇#xff01;
具体实现
其实搞懂了是怎么一回事…背景
前段时间公司做项目该项目涉及到的敏感数据比较多经过的一波讨论之后决定前后端进行接口加密处理采用的是 AES BASE64 算法加密~
网上关于 AES 对称加密的算法介绍看上一篇
具体实现
其实搞懂了是怎么一回事做起来还是挺简单的因为库都是现成的我们只需要会用就好啦这里我在推荐一篇理解AES加密解密的使用方法加深大家对 AES 算法的理解~
这里我以 Vue 作为例子其他的也就大同小异了~
要用 AES 算法加密首先我们要引入 crypto-js crypto-js 是一个纯 javascript 写的加密算法类库 可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列进行 AES、DES、Rabbit、RC4、Triple DES 加解密我们可以采用 npm install crypto-js --save 进行下载安装也可以直接去 GitHub下载源码~其次我们需要定义两个方法 分别是用于加密和解密这里我将它放在了 utils 文件夹下命名为 secret.js 其具体代码如下const CryptoJS require(crypto-js); //引用AES源码jsconst key CryptoJS.enc.Utf8.parse(1234123412ABCDEF); //十六位十六进制数作为密钥const iv CryptoJS.enc.Utf8.parse(ABCDEF1234123412); //十六位十六进制数作为密钥偏移量//解密方法function Decrypt(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 将其暴露出去方便在需要的时候进行引入~
ok核心代码就这么多是不是很简单啊其实也么有你想的那么复杂哈剩下的就是展示一下如何使用咯~
示例
这里我定义了一个 index.vue 用来展示数据加解密的操作~
加密操作 假设我们现在要给后端发送一段文字暂且定义为 This is a clear text 在发送之前我们需要对其进行加密操作这时候我们可以调用上面介绍的 Encrypt 方法通过加密后我们可以得到密文为4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357解密操作 假设我们请求后端接口后端返回了我们一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 这让我很蒙蔽啊这时候就要调用 Decrypt 方法通过解密我们可以拿到后端返回的信息其实是{name:Chris,sex:male}结语
至此你已经 get 了前端 AES 加解密的方法是不是感觉很简单啊用起来很简单原理可不简单况且这也只是其中的一种方案关于加解密的方法还有很多感兴趣的小伙伴们可以继续做一些深入的研究哈~
对了代码已上传到 GitHub有需要的小伙伴自行下载~
