基於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加密算法的詳細介紹與實現