MD5、Base64、jsencrypt 加密

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);