基于VUE的前端crypto-js aes加密与解密

第一步： npm install crypto-js --save

第二步：在utils文件夹下新建secret.js文件，封装公共方法。

密钥可由服务端返回

const CryptoJS = require('crypto-js');  //引用AES源码js    
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数做为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数做为密钥偏移量

//加密方法
export function Encrypt(word){
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.ciphertext.toString().toUpperCase();
}
//解密方法
export function Decrypt(word){
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

第三步：使用引用

1.加密页面

<script>
import { Encrypt } from '../../utils/secret.js'
export default {
   created(){
      this.encryptionName = Encrypt(this.username) // 加密用户名
      this.getList()
   }
}
</script>

2.解密页面

<script>
import { Decrypt } from '../../utils/secret.js'
export default {
   created(){
      this.encryptionName = Decrypt(this.username) // 解密用户名
   }
}
</script>

完成！

原理实现推荐这篇文章：AES加密算法的详细介绍与实现