快捷導(dǎo)航

Vue項(xiàng)目中實(shí)現(xiàn)AES加密解密的全過程

更新時間：2024年08月19日 10:42:16 作者：小金子J

AES算法是一種對稱加密算法,用于加密和解密數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中實(shí)現(xiàn)AES加密解密的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在前端開發(fā)中，保護(hù)用戶數(shù)據(jù)的安全性至關(guān)重要。AES（高級加密標(biāo)準(zhǔn)）作為一種廣泛使用的對稱加密算法，因其高效性和安全性而受到青睞。本文將介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)AES加密解密，包括ECB和CBC兩種模式。

項(xiàng)目中用到AES算法做傳輸加密的優(yōu)點(diǎn)。

1、對內(nèi)存的需求非常低，適合于受限環(huán)境。

2、運(yùn)算速度快。

3、分組長度和密鑰長度設(shè)計(jì)靈活。

4、很好的抵抗差分密碼分析及線性密碼分析的能力。

5、AES的密鑰長度比DES大，它也可設(shè)定為32比特的任意倍數(shù)，最小值為128比特，最大值為256比特，所以用窮舉法是不可能破解的。

環(huán)境搭建

在Vue項(xiàng)目中使用AES加密解密功能之前，需要先安裝crypto-js庫。通過執(zhí)行以下命令，可以輕松地將crypto-js添加到項(xiàng)目中：

npm install crypto-js --save-dev

封裝AES加密解密方法

接下來，我們將在Vue項(xiàng)目的util目錄下創(chuàng)建一個名為aes.js的文件，用于封裝AES加密解密的方法。

ECB模式

ECB（電子密碼本模式）是一種簡單的加密方式，將數(shù)據(jù)分成固定長度的塊進(jìn)行加密。以下是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（密碼塊鏈接模式）通過使用前一個塊的加密結(jié)果來影響當(dāng)前塊的加密過程，從而提高安全性。以下是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組件中，您可以導(dǎo)入并使用這些方法來加密和解密數(shù)據(jù)。例如：

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

// 使用CBC模式加密WebSocket URL
const encrypted = encryptCBC("ws://192.168.30.110:15674/ws");
console.log(encrypted); // 輸出加密后的數(shù)據(jù):O6hoY/k1QZ+0eYMSciwxTZUceXKdQ9EWXkdSIECwf9c=

const decrypted = decryptCBC(encrypted);
console.log(decrypted); // 輸出解密后的數(shù)據(jù):ws://192.168.30.110:15674/ws