前端加密解密（AES、RSA）

目前在使用过程中需要在前端加密一些数据传给后台，或者从后台接收数据去解析。本文使用vue为基础框架

1、使用AES加密解密

 首先在vue中下载引用

npm install crypto-js --save-dev

在src中创建一个utils文件，在其中创建AES.js文件，加入代码：（ECB模式与CBC模式类似，相较于前者CBC模式需要多一个向量iv）

import CryptoJS from 'crypto-js';
class CryptoFiles {
  constructor () {
    // 秘钥
    this.key = CryptoJS.enc.Utf8.parse('12345454588');
  }
  // 加密
  encrypt(word) {
    let words = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(words, this.key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.toString();
  }

  // 解密
  decrypt(word) {
    let decrypt = CryptoJS.AES.decrypt(word, this.key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  }
}
export default new CryptoFiles()

在需要使用的界面引入

 import AES from '@/utils/AES.js';

调用加密解密方法：

let data = '这是一条新的加密问题'
let encryptData = AES.encrypt(JSON.stringify(data));
let decryptData = AES.decrypt(encryptData)

2、RSA加密解密

 首先在vue中下载引用

npm install jsencrypt --save-dev

在main.js中挂载：

//RAS加密
Vue.prototype.$getRsaCode = function(str){ // 注册方法
  let encryptStr = new JSEncrypt();
  const publicKey = '**********';
  encryptStr.setPublicKey(publicKey); // 设置 加密公钥
  let  data = encryptStr.encrypt(str.toString());  // 进行加密
  return data;
}
Vue.prototype.$getRsaDeCode = function(str) { // 解密
  var decrypt = new JSEncrypt()
  const privateKey = '**********';
  decrypt.setPrivateKey(privateKey)//解密公钥
  var decryptMsg = decrypt.decrypt(str.toString()) //解密
  return decryptMsg
}

需要的时候使用：

this.$getRsaCode(test)/*加密*/
this.$getRsaDeCode(test)/*解密*/