1、前端MD5加密
1.1 npm 安装js-md5
npm install js-md5
1.2 项目中引入 MD5
// vue 项目中引入 js-md5
import md5 from "js-md5";
// script 中引入 js-md5
<script src="~/js-md5"></script>
1.3 项目中使用MD5加密方法
// 123456 ==> e10adc3949ba59abbe56e057f20f883e
md5('123456')
// 百度 ==> a3f4a5b080e2a4ef4a708b9c9f5ad003
md5('百度')
2、前端 base64 加密
2.1 npm 安装 js-base64
npm install js-base64
2.2 项目中引入 base64
// vue 中引入
let Base64 = require('js-base64').Base64;
// script 中引入
<script src="/scripts/base64.js"></script>
2.3 项目中使用base64加密方法
// 123456 ==> MTIzNDU2
Base64.encode('123456')
// 百度 ==> 55m+5bqm
Base64.encode('百度')
2.4 项目中使用base64解密方法
// 5Lit5paH ==> 中文
Base64.decode('5Lit5paH')
3、js 实现MD5、Base64加密
3.1 base64 加密
<script src="base64.js"></script>
<script >
var Base64 = new Base64();
// 加密
var str = Base64.encode("百度");
//解密
var a = Base64.decode(str);
</script>
3.2 MD5 加密
<script src="md5.js"></script>
<script>
var hash = hex_md5("百度");
</script>
4、jsencrypt 加密
4.1 vue项目中安装 jsencrypt
使用npm 安装 jsencrypt
npm install jsencrypt --dep
使用yarn安装 jsencrypt
yarn add jsencrypt --dep
4.2 项目中引入jsencrypt
import { JSEncrypt } from 'jsencrypt'
4.3 公钥为后端提供，如前端需要解密数据，则需要后端提供私钥。此处只封装了加密。
methods: {
encryptedData(publicKey, data) {
// 新建JSEncrypt对象
let encryptor = new JSEncrypt();
// 设置公钥
encryptor.setPublicKey(publicKey);
// 加密数据
return encryptor.encrypt(data);
}
}
4.4 调用函数加密
/**
* $publicKey 公钥
* $value 需要加密的数据
*/
encryptedValue = this.encryptedData(publicKey, value);
