在前端开发中，保护用户数据的安全性至关重要。AES（高级加密标准）作为一种广泛使用的对称加密算法，因其高效性和安全性而受到青睐。本文将介绍如何在Vue项目中实现AES加密解密，包括ECB和CBC两种模式。

环境搭建

在Vue项目中使用AES加密解密功能之前，需要先安装<code>crypto-js库。通过执行以下命令，可以轻松地将crypto-js添加到项目中：

npm install crypto-js --save-dev

封装AES加密解密方法

接下来，我们将在Vue项目的util目录下创建一个名为aes.js的文件，用于封装AES加密解密的方法。

ECB模式

ECB（电子密码本模式）是一种简单的加密方式，将数据分成固定长度的块进行加密。以下是ECB模式的加密和解密方法：

import CryptoJS from 'crypto-js';

/**

* AES加密处理（ECB模式）

*/

export function encryptECB(plaintText) {

var plaintText = plaintText;

var options = {

mode: CryptoJS.mode.ECB,

padding: CryptoJS.pad.Pkcs7

};

var key = CryptoJS.enc.Utf8.parse("abcdefgabcdefg12"); //秘钥

var encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);

var encryptedBase64Str = encryptedData.toString().replace(/\//g, "_");

encryptedBase64Str = encryptedBase64Str.replace(/\+/g,"-");

return encryptedBase64Str;

}

/**

* AES解密处理（ECB模式）

*/

export function decryptECB(encryptedBase64Str) {

var vals = encryptedBase64Str.replace(/\-/g, '+').replace(/_/g, '/');

var options = {

mode: CryptoJS.mode.ECB,

padding: CryptoJS.pad.Pkcs7

};

var key = CryptoJS.enc.Utf8.parse("abcdefgabcdefg12"); //秘钥

var decryptedData = CryptoJS.AES.decrypt(vals, key, options);

var decryptedStr = CryptoJS.enc.Utf8.stringify(decryptedData);

return decryptedStr

}

CBC模式

CBC（密码块链接模式）通过使用前一个块的加密结果来影响当前块的加密过程，从而提高安全性。以下是CBC模式的加密和解密方法：

import CryptoJS from 'crypto-js'

/**

* AES加密处理（CBC模式）

*/

export function encryptCBC(word, keyStr, ivStr) {

keyStr = keyStr ? keyStr : "abcdefgabcdefg12";

ivStr = ivStr ? ivStr : "!@#$%asdfg12345";

let key = CryptoJS.enc.Utf8.parse(keyStr);

let iv = CryptoJS.enc.Utf8.parse(ivStr);

let srcs = CryptoJS.enc.Utf8.parse(word);

let encrypted = CryptoJS.AES.encrypt(srcs, key, {

iv,

mode: CryptoJS.mode.CBC,

padding: CryptoJS.pad.ZeroPadding

})

return encrypted.toString()

}

/**

* AES解密处理（CBC模式）

*/

export function decryptCBC(word, keyStr, ivStr) {

word = (word + '').replace(/\n*$/g, '').replace(/\n/g, ''); //增加这一行，将换行符替换为空

keyStr = keyStr ? keyStr : "abcdefgabcdefg12";

ivStr = ivStr ? ivStr : "!@#$%asdfg12345";

var key = CryptoJS.enc.Utf8.parse(keyStr);

let iv = CryptoJS.enc.Utf8.parse(ivStr);

var decrypt = CryptoJS.AES.decrypt(word, key, {

iv,

mode: CryptoJS.mode.CBC,

padding: CryptoJS.pad.ZeroPadding

})

return decrypt.toString(CryptoJS.enc.Utf8)

}

使用方法

在Vue组件中，您可以导入并使用这些方法来加密和解密数据。例如：

import { encryptECB, decryptECB, encryptCBC, decryptCBC } from "@/util/aes";

// 使用CBC模式加密WebSocket URL

const encrypted = encryptCBC("ws://192.168.30.110:15674/ws");

console.log(encrypted); // 输出加密后的数据:O6hoY/k1QZ+0eYMSciwxTZUceXKdQ9EWXkdSIECwf9c=

const decrypted = decryptCBC(encrypted);

console.log(decrypted); // 输出解密后的数据:ws://192.168.30.110:15674/ws

安全性考虑

密钥和初始化向量（IV）应该安全地存储和管理，避免硬编码在代码中。CBC模式相较于ECB模式提供了更高的安全性，因此在可能的情况下推荐使用CBC模式。选择合适的分组大小和填充方式，以平衡性能和安全性。

通过本文的介绍，您应该能够理解并实现Vue项目中的AES加密解密功能，希望这些信息对您的项目有所帮助。