【react使用AES对称加密的实现】

前言

项目中要求敏感信息怕被抓包泄密必须进行加密传输处理，普通的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_KEY
  const 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_KEY
  const 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文件注释了，就别传到远端去了，这个是个小项目，其实加密不加密意义都不大，不知道做那种银行机密的码友们又是怎么处理的，可以在评论区讨论下，文中有啥不对的地方欢迎指正