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)
    }
  }
}

你可能感兴趣的:(vue,vue.js,前端,javascript)