目录
- 1、安装crypto
- 2、创建crypto.js文件
- 3、在main.js主文件中进行引用
- 4、页面中进行使用
- 5、实现效果展示
- 6、加密模式解析以及iv参数使用
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);
在上述示例中，通过CryptoJS.lib.WordArray.random(16)生成了一个 16 字节的随机iv，然后在CryptoJS.AES.encrypt方法中传入iv参数，指定了加密模式为CBC（Cipher Block Chaining，密码块链接模式），这种模式下需要使用iv。
