当前位置：首页 > news >正文

【Vue3中使用crypto-js】crypto-js加密解密用法

news 2025/7/15 6:22:57

1、安装crypto

npm install crypto-js 
如果是在Typescript版本需要再安装
npm install --save @types/crypto-js

2、创建crypto.js文件

注意点：

CryptoJS.enc.Utf8.parse(‘xxxxx’)秘钥应该前后端保持一致，否则会导致加密和解密无法正常进行，因为只有使用相同的密钥才能正确地加密和解密数据。
密钥的长度和格式需要符合 AES 加密算法的要求

详解：

CryptoJS.AES.encrypt 是 crypto - js 库中用于 AES 加密的方法，它接受三个参数：
plaintext：要加密的文本
KEY：定义的加密密钥。
一个配置对象，这里指定了两个属性：
- mode：加密模式，设置为 CryptoJS.mode.ECB，即电子密码本模式。ECB 模式是一种简单的加密模式，它将明文分成固定长度的块，然后对每个块进行独立加密。但这种模式存在安全风险，例如相同的明文块会加密成相同的密文块，容易被攻击者利用进行分析，在实际生产中不推荐使用，建议使用更安全的模式，如 CBC或 GCM。
- padding：填充模式，设置为 CryptoJS.pad.Pkcs7。PKCS7 填充是一种常用的填充方式，它会在明文的末尾填充一定数量的字节，使得明文长度是块大小的整数倍。这里提到前端使用 Pkcs7 对应后端的 Pkcs5，实际上 PKCS5 是块大小固定为 8 字节的 PKCS7 填充的特殊情况，在实际使用中要确保前后端对填充方式的理解和处理一致。
.toString()：加密操作返回一个 WordArray 对象，调用 toString() 方法将其转换为字符串形式的密文，以便于存储和传输。
—————————————————————————————————
CryptoJS.AES.decrypt 是 crypto - js 库中用于 AES 解密的方法。它接受三个参数：
- jsonStr：要解密的密文
- KEY：与加密时相同的密钥。
- 配置对象，同样指定了 mode 为 ECB 模式，padding 为 Pkcs7 填充模式。
.toString(CryptoJS.enc.Utf8)：解密操作返回一个 WordArray 对象，调用 toString(CryptoJS.enc.Utf8) 方法将其转换为 UTF - 8 编码的字符串形式的明文。

import CryptoJS from 'crypto-js'/*** AES 加密* KEY:  需要前后端保持一致* mode: ECB  需要前后端保持一致* pad: Pkcs7 //前端 Pkcs7 对应 后端 Pkcs5*/
const KEY = CryptoJS.enc.Utf8.parse('a761009ce3547b727e9387f2e6afadb2') // 秘钥
// const KEY = CryptoJS.lib.WordArray.random(16).toString(CryptoJS.enc.Hex)// 生成随机的iv，长度为16字节
const iv = CryptoJS.lib.WordArray.random(16)export const AES_Encrypt = (plaintext) => {let ciphertext = CryptoJS.AES.encrypt(plaintext, KEY, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7,}).toString()return ciphertext
}/*** AES 解密*/
export const AES_Decrypt = (jsonStr) => {let plaintext = CryptoJS.AES.decrypt(jsonStr, KEY, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7,}).toString(CryptoJS.enc.Utf8)return plaintext
}

3、在main.js主文件中进行引用

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
//全局密码加密
import { AES_Encrypt, AES_Decrypt } from '@/utils/crypto.js'const app = createApp(App)app.use(createPinia())
app.use(router)
app.config.globalProperties.$AES_Encrypt = AES_Encrypt //全局加密
app.config.globalProperties.$AES_Decrypt = AES_Decrypt //全局解密app.mount('#app')

4、页面中进行使用

<template><div>index</div></template><script>
import { getCurrentInstance } from 'vue'
export default {setup() {const password = '2345687'// 使用getCurrentInstance获取proxy从而调用全局方法const { proxy } = getCurrentInstance()const encryptedPassword = proxy.$AES_Encrypt(password)console.log(encryptedPassword, '1111加密后的密码')const decryptedPassword = proxy.$AES_Decrypt(encryptedPassword)console.log(decryptedPassword, '1111解密后的密码')},
}
</script>

5、实现效果展示

在这里插入图片描述

在最后描述一下，我在main.js代码中使用的是CryptoJS的ECB（电子密码本模式）；
将明文分成固定长度的块，每个块独立使用密钥进行加密，相同的明文块会生成相同的密文块，加密和解密过程相对简单，易于实现，加密速度快。由于相同明文块加密结果相同，容易受到已知明文攻击，安全性较低。适用于对少量数据且安全性要求不高的加密，如加密单个密钥等。

6、加密模式解析以及iv参数使用

像CryptoJS.mode加密模式解析还有：

CBC（Cipher Block Chaining，密码块链接模式）
CFB（Cipher Feedback，密文反馈模式）
OFB（Output Feedback，输出反馈模式）
CTR（Counter，计数器模式）

在CryptoJS.AES.encrypt方法中，iv（Initialization Vector，初始化向量）是一个可选参数，主要用于加密算法的初始化过程。
在CryptoJS中使用ECB（电子密码本模式）时不能使用iv。

以下是一个使用iv参数的CryptoJS.AES.encrypt加密示例：

import CryptoJS from 'crypto-js';// 定义密钥和明文
const key = CryptoJS.enc.Utf8.parse('a761009ce3547b727e9387f2e6afadb2');
const plaintext = 'Hello, World!';// 生成随机的iv，长度为16字节
const iv = CryptoJS.lib.WordArray.random(16);// 使用AES加密，传入密钥和iv
const ciphertext = CryptoJS.AES.encrypt(plaintext, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.Pkcs7
}).toString();console.log(ciphertext);