前端加密、解密

目录

1.前言：

2.应用场景举例

3.CryptoJS加密解密

 第一步，下载插件

 第二步，在需要的文件中引入

 第三步，加密

 第四步，解密

小结：

4.base64 加密解密

第一步，下载

第二步，引入，在你需要使用的文件中引入

第三步，加密

第四步，解密

小结：

---

1.前言：

像这种功能，不必追求底层怎么实现，以我而言，最好是2分钟做完加密最好，结果今天被“百度”来的坑了一把，加密还正常，解密直接成了空白字符。简直误人子弟。于是我翻了翻以前项目写的，在现有的项目里运行成功并完成功能，特此整理。

---

2.应用场景举例

今天做了一个功能，用户在表单里输入密码，加密后发给后端，点击编辑时，后端再将之前加密的数据原封不动给我，我解密后供用户编辑，最后再将编辑后的密码加密传给后端。 

---

3.CryptoJS加密解密

---

 第一步，下载插件

$ npm install --save js-base64

 第二步，在需要的文件中引入

import CryptoJS from "crypto-js";//在需要的文件中引入

  第三步，加密

// this.data:需要加密的数据 ;secretkey:密钥,可以自己起;cipherText:变量接收
let cipherText = CryptoJS.AES.encrypt(this.data, "secretkey").toString();

  第四步，解密

// this.data:要解密的数据；secretkey：密钥，要和上面加密时的一致，相当于暗号
CryptoJS.AES.decrypt(this.data, "secretkey").toString(CryptoJS.enc.Utf8)

---

小结：

推荐使用这个方式，下面讲的base64有两个感觉，第一个是加密的深度不如这个，再就是遇上一些特殊字符容易报错，纯实测总结…然而，base64更简单一些，哈哈 

---

4.base64 加密解密

---

第一步，下载

$ npm install --save js-base64

第二步，引入，在你需要使用的文件中引入

import { Base64 } from 'js-base64';
import { encode, decode } from 'js-base64';

第三步，加密

var jiami = encode(str); // 加密，str是你要加密的数据

第四步，解密

var jiemi= decode(data); // 解密，data是你要解密的数据

---

小结：

这个使用极其简单，但是有时候会遇到错误，比如一些特殊字符，我之前用了一组纯数字，实测报错了，但是他还有其他的好处，我之前用它给二进制的音频文件加密还是很好用的，你还是酌情选择吧，不过这两种方案都是很推荐的方式，他们最大的好处就是可以解密，其他的像md5，rsa都只能加密不能解密，当然他们的加密效果更强，根据项目和需求来选择，反正殊途同归，都基本上是这个套路。如有问题欢迎评论区讨论。