vue3中使用crypto-js库进行加密/解密

使用crypto-js库进行加密/解密

安装

npm install crypto-js

基本使用

<template>
    <div>
        使用crypto-js库进行加密/解密
    </div>
</template>

<script setup>
import CryptoJS from 'crypto-js';
import { onMounted } from 'vue';

// 加密函数
const encryptMessage = (message, key) => {
    // AES 加密
    const ciphertext = CryptoJS.AES.encrypt(message, key).toString();
    return ciphertext;
}

// 解密函数
const decryptMessage = (ciphertext, key) => {
    // AES 解密
    const bytes = CryptoJS.AES.decrypt(ciphertext, key);
    const originalText = bytes.toString(CryptoJS.enc.Utf8);
    return originalText;
}

// 要加密的原始消息和密钥
const originalMessage = 'Hello, world!';
const encryptionKey = 'goto_w'; // 16 bytes (128 bits)

onMounted(() => {
    // 加密消息
    const encryptedMessage = encryptMessage(originalMessage, encryptionKey);
    console.log('加密后的消息:', encryptedMessage);

    // 解密消息
    const decryptedMessage = decryptMessage(encryptedMessage, encryptionKey);
    console.log('解密后的消息:', decryptedMessage);
})
</script>

封装成一个工具函数，支持常见的数据类型（字符串，数组，对象）

// 导入 CryptoJS 模块
import CryptoJS from 'crypto-js';

/**
 * @description: 加解密函数
 * @param {*} data 需要加密的数据
 * @param {*} key 加密密钥
 * @return {*} 返回加密后的数据
 */

// 加密函数
function encrypt(data, key) {
    // 将不同类型的数据转换为字符串
    const dataString = JSON.stringify(data);
    // AES 加密
    const ciphertext = CryptoJS.AES.encrypt(dataString, key).toString();
    return ciphertext;
}

// 解密函数
function decrypt(ciphertext, key) {
    // AES 解密
    const bytes  = CryptoJS.AES.decrypt(ciphertext, key);
    const decryptedString = bytes.toString(CryptoJS.enc.Utf8);
    // 将 JSON 字符串转换回原始数据
    const decryptedData = JSON.parse(decryptedString);
    return decryptedData;
}

export { encrypt, decrypt };

使用加密/解密的工具函数

<template>
    <div>
        使用crypto-js库进行加密/解密
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { encrypt, decrypt } from '@/utils/crypto';

onMounted(() => {
    const ciphertext = encrypt({ name: 'goto_w', age: 18 }, 'goto_w')
    console.log(ciphertext);
    const decryptedData = decrypt(ciphertext, 'goto_w')
    console.log(decryptedData);
})
</script>