vue项目中使用aes.js加密及解密

一、安装crypto-js依赖

npm install crypto-js --save-dev

二、创建配置文件AES.js

AES.js(utils/AES.js)

import CryptoJS from 'crypto-js'
const keyStr = '1grLx91U40VawzhRAm7E' // 秘钥
export default {
  // 加密
  encrypt(word) {
    // 判断是否存在keyStr，不存在就用默认的keyStr（注意：这个keyStr必需要前后端统一，不然双方加密解密后会不相同。调用generatekey方法生成）
    // keyStr = keyStr ? keyStr : '1grLx91U40VawzhRAm7E'
    const key = CryptoJS.enc.Utf8.parse(keyStr)
    const srcs = CryptoJS.enc.Utf8.parse(word)
    const encrypted = CryptoJS.AES.encrypt(srcs, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    })
    return encrypted.toString()
  },
  // AES的ECB加密（还有CBC模式）
  encryptECB(word) {
    // 这里是密钥
    var keyHex = CryptoJS.enc.Utf8.parse(keyStr)
    // 这里是demo样本 一些是json，
    // var plaintText = "{'a':'SSS'}"
    // 一些是string
    var plaintText = word

    // 用ECB进行加密
    var encryptedData = CryptoJS.AES.encrypt(
      // JSON.stringify(plaintText),
      plaintText,
      keyHex,
      {
        iv: CryptoJS.enc.Utf8.parse('0000000000000000'), // 16位
        mode: CryptoJS.mode.ECB, // 加密模式
        padding: CryptoJS.pad.Pkcs7
      })
    // 打印出加密后的
    console.log(encryptedData.toString(), '加密后')
    // 再进行一些加工加密
    encryptedData = encryptedData.ciphertext.toString()
    // 转出Hex的 (这一步是因为加密后位数必须是3的倍数，如果不是用‘=’补齐，
    // 当存在“=”时，后端可能需要其他处理，为方便后端使用Hex转为16进制)
    return CryptoJS.enc.Hex.parse(encryptedData)
  },

  // 解密
  decrypt(word) {
    // 这里是密钥
    var keyHex = CryptoJS.enc.Utf8.parse(keyStr)
    // 这里需要将16进制的数据转为base64
    var encryptedBase64Str = CryptoJS.enc.Hex.parse(word)
    // console.log('解密前Base64：' + encryptedBase64Str)
    var str = CryptoJS.enc.Base64.stringify(encryptedBase64Str)
    // 接下来就是解密了，讲最后Base64形式的进行解密
    var decryptedData = CryptoJS.AES.decrypt(
      str,
      keyHex,
      {
        iv: CryptoJS.enc.Hex.parse('0000000000000000'), // 16位
        mode: CryptoJS.mode.ECB, // 加密模式
        padding: CryptoJS.pad.Pkcs7
      }
    )
    // 这里会产生制表符需要清除掉(如果解密后数据少于16位会以空格补齐)
    return decryptedData.toString(CryptoJS.enc.Utf8).replace(/\0/g, '')
  }
}

三、使用

<template>
  <div>
  	<button onclick="encrypt">加密</button>
    <button onclick="decode">解密</button>
  </div>
</template>
<script>
  import AES from '@/utils/AES.js'
  export default {
    data () {
      return {
        str: '测试加密与解密',
        encryptStr: null
      }
    },
    methods: {
		encrypt() {
			this.encryptStr = AES.encryptECB(this.str)
			console.log(this.encryptStr)
		},
		decode() {
			console.log(AES.decode(this.encryptStr))
		},
	}
  }
</script>