前端 AES 加密

背景

在最近的项目中，客户要求三方安全测试，因此对系统中部分接口采用加密传输。

首先

npm i crypto-js --save

在js文件中写加密、解密的方法

import CryptoJS from "crypto-js"

// AES加密
export function encryptByAES (data) {
  let AESKey = "XXXXXXXX";  // 此处为密钥
  let key = CryptoJS.enc.Utf8.parse(AESKey);
  let cipherText = CryptoJS.AES.encrypt(data, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return cipherText.toString();
}

// AES解密
export function decryptedByAES (data) {
  let AESKey = "XXXXXXXX";  // 此处为密钥
  let key = CryptoJS.enc.Utf8.parse(AESKey);
  let decryptedData = CryptoJS.AES.decrypt(data, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return decryptedData.toString(CryptoJS.enc.Utf8)
}

在组件中使用

import { encryptByAES, decryptedByAES} from '@/XXX/aes.js'

console.log(encryptByAES("此处为明文"));
console.log(decryptedByAES("此处为密文"));

在使用过程中发现get请求会过滤密文中的特殊符号，所以需要在进行请求时，使用encodeURIComponent()方法进行转换。

import { encryptByAES, decryptedByAES} from '@/XXX/aes.js'

console.log(encryptByAES("此处为明文"));

encodeURIComponent(encryptByAES("此处为明文"));