前端 crypto-js aes 加解密

怼烎@ 2021-09-15 05:36 330阅读 0赞

### 背景 ###

前段时间公司做项目，该项目涉及到的敏感数据比较多，经过的一波讨论之后，决定前后端进行接口加密处理，采用的是 `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` ，其具体代码如下：

上面的代码中的 `key` 是密钥 ，`iv` 是密钥偏移量，这个一般是接口返回的，为了方便，我们这里就直接在这里定义了。

值得注意的是密钥的长度，由于对称解密使用的算法是 `AES-128-CBC`算法，数据采用 `PKCS#7` 填充 ， 因此这里的 `key` 需要为16位！

接着我们定义了 **解密方法`Decrypt`** 和 **加密方法 `Encrypt`** ，最后通过 `export default` 将其暴露出去，方便在需要的时候进行引入~

ok，核心代码就这么多，是不是很简单啊，其实也么有你想的那么复杂哈，剩下的就是展示一下如何使用咯~

### 示例 ###

这里我定义了一个 `index.vue` 用来展示数据加解密的操作~

**加密操作：** 假设我们现在要给后端发送一段文字，暂且定义为 `This is a clear text` ， 在发送之前我们需要对其进行加密操作，这时候我们可以调用上面介绍的 `Encrypt` 方法，通过加密后我们可以得到密文为：`4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357`

![Encrypt][]

**解密操作：** 假设我们请求后端接口，后端返回了我们一堆如下的字符串 `BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF` , 这让我很蒙蔽啊，这时候就要调用 `Decrypt` 方法，通过解密我们可以拿到后端返回的信息其实是：`{"name":"Chris","sex":"male"}`

![1][]

### 结语 ###

至此，你已经 `get` 了前端 `AES` 加解密的方法，是不是感觉很简单啊，用起来很简单，原理可不简单，况且这也只是其中的一种方案，关于加解密的方法还有很多，感兴趣的小伙伴们可以继续做一些深入的研究哈~

对了，代码已上传到 [GitHub][GitHub 1]，有需要的小伙伴自行下载~

[AES]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fvieri_32%2Farticle%2Fdetails%2F48345023
[GitHub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbrix%2Fcrypto-js
[Encrypt]: /images/20210813/6c8ba9cadbb14831bcac8170a4a2ca09.png
[1]: /images/20210813/f619cb95ddce48e39403390db2672694.png
[GitHub 1]: https://github.com/yusirxiaer/vue-crypto