前端常用3种数据加密方式的使用（最详解）

1.Base64加密

Base64顾名思义，就是基于64个可打印字符来表示二进制数据的一种方法，「注意它并不是一种加密算法」。对于64个打印字符，我们只需要6个二进制位就可以完全表示了。那么我们如何利用8个二进制位来表示只需要6个二进制位就可以完全表示的可打印字符呢？由于2的6次方等于64，所以我们可以将每6个位元为一个单元，对应某个可打印字符。三个字节有24个位元，对应于4个Base64单元，即3个字节需要用4个可打印字符来表示

如何使用

原生加解密

  const btoa = window.btoa('hello, my name is FuChaoyang ')  // 编码
  console.log('加密后',btoa)
  const atob = window.atob('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA')  // 解码
  console.log('解密后',atob)

base64插件 

 安装：

npm install --save js-base64

比如vue3中引入使用，其他框架大同小异，可做参考

<script lang="ts">
import { defineComponent } from 'vue';
import { Base64 } from 'js-base64';
export default defineComponent({
  name: 'Test',
  setup() {
    const encode = Base64.encode('hello, my name is FuChaoyang'); // 编码
    console.log('插件加密后', encode);
    const decode = Base64.decode('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA'); // 解码
    console.log('插件解密后', decode);
  }
});
</script>

总结
优势：

base64 适合不同平台、不同语言的传输；
页面中内嵌使用 base64 格式的小图片，可减少了服务器访问次数；
二进制位转换 base64 算法简单，对性能影响不大；
缺点：

二进制文件转换为 base64 后，体积大概增加 1/3；
base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css；
面对大文件时，会消耗一定的 CPU 进行编解码。

2.MD5加密（不可逆）

简介
MD5是一种单向哈希算法，即将任意长度的“消息”经过哈希运算，生成一个128位的“指纹”。

使用MD5加密可以将原始的字符串转化为不可逆的密文，从而保证数据在传输中不被篡改，提高安全性。在前端中，我们可以通过JS库调用md5加密函数进行字符串加密，以保护用户信息。如何使用 
安装

npm install js-md5 -s

 比如vue3中引入使用，其他框架大同小异，可做参考

<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
  name: 'Test',
  setup() {
    console.log('md5加密', md5('hello, my name is FuChaoyang'));
  }
});
</script>

使用技巧

加盐

为了增强加密的安全性，我们可以在原始字符串的基础上再加上一段随机的字符串，这个字符串就是“盐”。

比如如下加盐加密：

<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
  name: 'Test',
  setup() {
    console.log('md5加密', md5('hello, my name is FuChaoyang'));
    const salt = 'AbC$123'; // 定义一个随机的盐值
    console.log('加盐后md5加密', md5('hello, my name is FuChaoyang' + salt));
  }
});
</script>

将"hello, my name is FuChaoyang"加上随机字符串"AbC$123"后的结果。 通过加盐可以降低被破解的风险，增强应用的安全性。 

多次加密
为了提高加密的强度，我们可以将加密结果再次进行md5加密，多次加密后的结果更加难以破解。

比如如下多次加密：

<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
  name: 'Test',
  setup() {
    // MD5普通加密
    console.log('md5加密', md5('hello, my name is FuChaoyang'));
    // MD5加盐加密
    const salt = 'AbC$123'; // 定义一个随机的盐值
    console.log('加盐后md5加密', md5('hello, my name is FuChaoyang' + salt));
    // MD5多次加密
    console.log('md5多次加密', md5(md5('hello, my name is FuChaoyang')));
  }
});
</script>

注意点
1. 不要使用固定密钥
不要使用固定的密钥进行加密，否则容易被破解。应该采用随机密钥或者动态生成密钥进行加密。

2. 不要将加密算法公开
不要将加密算法公开，否则可能会被攻击者破解。应该将加密算法保密，仅在需要的场合使用。3. 不要只依赖前端加密
即使在前端进行加密，也应该在后端进行加密验证，以增强应用的安全性。

3.字符串的编码和解码

escape编码 unescape解码

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Test',
  setup() {
    let str = '富朝阳的前端博客';
    let newStr = escape(str);
    console.log('字符串：', str);
    console.log('加密：', newStr);
    let newStr2 = unescape(newStr);
    console.log('解密：', newStr2);
  }
});
</script>

注意点：对于汉字，数字不适用。

讲到这里，相信大家对前端加密的6种方式有详细的使用认识，如有不足之处，请大家补充，欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。