前端AES加解密
采用的是 AES
+ BASE64
算法加密~
网上关于 AES
对称加密的算法介绍挺多的,对这一块还不是特别理解的小伙伴可自行百度,这里我推荐一篇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源码js
const 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
![](http://upload-images.jianshu.io/upload_images/6633377-381239f35b58ed37.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
解密操作: 假设我们请求后端接口,后端返回了我们一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF
, 这让我很蒙蔽啊,这时候就要调用 Decrypt
方法,
通过解密我们可以拿到后端返回的信息其实是:{"name":"Chris","sex":"male"}
![](http://upload-images.jianshu.io/upload_images/6633377-eb7249069436efac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)