vue中AES加密解密

记录一下vue的AES加密解密

第一步：安装插件

npm install crypto-js

第二步：封装方法到公共文件中

AES 加密有EBC、CBC两种模式；前者是基础的加密模式，后者是循环模式，更安全。
这里要注意下，秘钥需要设置成16位的字符串，加密解密的秘钥要一致

import CryptoJS from 'crypto-js/crypto-js'

加密这里我用了一个JSON.stringify()方法，我看网上的好多都没有这一步。但是我在使用的时候发现，如果不把传过来的数据转一下，加密出来的密文就无法被解密；而且密文也很奇怪，就很短；这里就随机应变吧，如果不加，密文正常，可以解密成功，就是可以的。

// 加密 这里使用的是CBC模式 必须要设置偏移量
export function encryptData (encryptData) {
  const data = CryptoJS.enc.Utf8.parse(JSON.stringify(encryptData)) // 转义一下数据
  const key = CryptoJS.enc.Utf8.parse('digital20230221o') // 秘钥 需要设置16位
  const iv = CryptoJS.enc.Utf8.parse('digital20230221o') // 偏移量
  const encrypted = CryptoJS.AES.encrypt(data, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC
  })
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
};

下面是两种解密方法，

// 解密方法一：
export function decryptData (decryptStr, keyStr, ivStr) {
  const decryptBase64Str = CryptoJS.enc.Base64.parse(decryptStr)
  const key = CryptoJS.enc.Utf8.parse('digital20230221o') // 密钥 需要与加密秘钥保持一致
  const iv = CryptoJS.enc.Utf8.parse('digital20230221o') // 密钥偏移量
  const createCode = CryptoJS.lib.CipherParams.create({ ciphertext: decryptBase64Str }) // 将密文转换成 WordArray 对象
  const decryptedData = CryptoJS.AES.decrypt(createCode, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  const decryptedStr = CryptoJS.enc.Utf8.stringify(decryptedData).toString()
  console.log('9999', decryptedStr)
  return decryptedStr
};
// 解密方法二：
export function decrypt (encryptedData) {
  const key = CryptoJS.enc.Utf8.parse('digital20230221o')
  const iv = CryptoJS.enc.Utf8.parse('digital20230221o')
  const decrypted = CryptoJS.AES.decrypt(encryptedData, key,
    {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    })
  return decrypted.toString(CryptoJS.enc.Utf8)
}

其中 CryptoJS.enc.Utf8.parse（）将字符串以 utf8 的格式，转化为 WordArray 对象；CryptoJS.lib.CipherParams.create（）生成一个CipherParams对象，这里需要用cypherText属性将加密数据转换为cypherParam，作为第一参数，可以避免触犯parse方法。
上述两种方法都可以实现解密。这里提个醒，如果接口传过来的加密数据，在解密过程中发现解密出来的数据不太完整或者数据不对的情况，可以让后端看一下是不是加密的数据多了回车换行字符；我当时写第一种方法解密，一直出现数据不完整的情况，还以为是这样解密不行，就写了第二种，还是不行；后来发现后端的数据多了回车换行字符。
另：其实还是不太懂创建CipherParams对象和不创建CipherParams对象有什么最直观的区别，反正如果一种方法不行就试一试第二种。

第三步：引用方法

哪里需要就在哪里引用，举一个简单的示例：

import { encryptData, decryptData } from '@/utils/encryption.js'
export default {
  data () {
    return {
      data: ''
    }
  },
  created () {
  },
  methods: {
    // 加密
    encryptData () {
      const enData = {
        name: 'lisa',
        age: 18,
        class: 5
      }
      console.log('enData', enData)
      this.data = encryptData(enData)
      console.log('加密后的数据：', this.data)
    },
    // 解密
    decryptData1 () {
      const deData = decryptData(this.data)
      // 转json格式
      const endData = JSON.parse(deData)
      console.log('最终的数据结果：', endData)
    }
  }
}