记录一下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)
}
}
}