前言

项目中要求敏感信息怕被抓包泄密必须进行加密传输处理，普通的md5加密虽然能解决传输问题，但是项目中有权限的用户是需要查看数据进行查询的，所以就不能直接使用md5加密，于是就想到了使用AES对称加密，就可以达到传输的时候加密，后端收到后可以解密查看

使用CryptoJS库

引入：

npm i CryptoJS

密钥存放

这里密钥的存放考虑到安全原因，如果在接口中可能会被抓取，在考虑实际使用情况后使用了前端环境变量存放的方法，密钥作为前端应用的环境变量进行配置。在打包或部署前端应用时，可以将密钥配置为环境变量，并在应用运行时通过环境变量读取密钥。这样可以将密钥从源代码中分离出来，避免意外泄露。
在项目根目录下面创建.env文件

写入代码

REACT_APP_API_KEY = "后端给的密匙"

加密方法

// 加密
export const encryptionTxt = (plaintext) => {if (!plaintext) { // 空值判断, 避免空值阻塞代码return ''}if (typeof plaintext !== 'string') {// 加密内容必须为字符串plaintext = String(plaintext)}// 从环境变量中拿密匙const mikey = process.env.REACT_APP_API_KEYconst key = CryptoJS.enc.Utf8.parse(mikey)// 使用AES加密 (ECB模式)const encrypted = CryptoJS.AES.encrypt(plaintext, key, {mode: CryptoJS.mode.ECB, // ECB加密模式padding: CryptoJS.pad.Pkcs7, // 填充方式，常用Pkcs7})// 将加密后的数据转换为16进制字符串const encryptedHexStr = encrypted.ciphertext.toString(CryptoJS.enc.Hex)// 打印加密后的16进制字符串return encryptedHexStr
}

解密方法

// 解密
export const decryptText = (encryptedHexStr) => {if (!encryptedHexStr) {return ''}// 密钥 (需与加密时保持一致)const mikey = process.env.REACT_APP_API_KEYconst key = CryptoJS.enc.Utf8.parse(mikey)// 将16进制字符串转换为二进制格式const encryptedData = CryptoJS.enc.Hex.parse(encryptedHexStr)// 使用AES ECB模式进行解密const decrypted = CryptoJS.AES.decrypt({ ciphertext: encryptedData }, // 数据格式应为CryptoJS的ciphertext格式key,{mode: CryptoJS.mode.ECB, // ECB模式padding: CryptoJS.pad.Pkcs7, // 填充方式})// 转换解密后的数据为UTF-8字符串const decryptedText = decrypted.toString(CryptoJS.enc.Utf8)return decryptedText
}

结语

方法可以丢在工具目录下方便在页面中调用使用，我这个是在项目完成后才说加的功能，我就直接丢在until里面，然后在接口哪里把要传的值加密，页面里也是直接调用解密方法把加密的信息正常显示出来，对于保存密钥这个争议挺大的，放后端先使用公钥登录，获取权限后再发私钥也是一种方法，但是后端觉得只要在请求里其实就不安全，权衡之下使用的前端环境变量存放，前端环境变量存储的话如果用了git管理的，就把.env文件注释了，就别传到远端去了，这个是个小项目，其实加密不加密意义都不大，不知道做那种银行机密的码友们又是怎么处理的，可以在评论区讨论下，文中有啥不对的地方欢迎指正