Vue3 如何使用CryptoJS加密

更新時間：2024年10月16日 11:41:05 作者：茶顏悅色

CryptoJS是一個強大的JavaScript庫,它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護數據安全,防止信息泄露,通過簡單的安裝和函數編寫,本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧

為什么要加密？

現在的互聯(lián)網世界充滿了各種各樣的信息，有些信息非常重要，比如密碼、個人信息等。如果我們把這些信息直接發(fā)送到服務器，別人可能會截取到，然后偷走我們的信息。為了避免這種情況發(fā)生，我們需要把重要的信息變成別人看不懂的東西，這就是加密的作用。

CryptoJS 是什么？

CryptoJS 是一個非常好用的 JavaScript 庫，它能幫我們加密和解密信息。這個庫很小巧，而且功能很強大，支持很多種加密方法。我們這里主要用它的 AES 加密功能。

如何安裝 CryptoJS？

首先，我們需要在項目里安裝 CryptoJS。可以用下面的命令來安裝：

npm install crypto-js

或者

yarn add crypto-js

如何加密和解密？

現在我們已經有了 CryptoJS，接下來就可以寫代碼來加密和解密信息了。

密鑰和偏移量

加密需要一把“鑰匙”，這把鑰匙就是密鑰。另外還有一個叫“偏移量”的東西，它可以幫助我們更好地加密信息。這兩個東西一定要保密，不能讓別人知道。

import * as CryptoJS from "crypto-js";
// 密鑰和偏移量
// 這里使用環(huán)境變量來設置密鑰和偏移量，確保它們的安全性
const key = CryptoJS.enc.Utf8.parse(process.env.VUE_APP_KEY);
const iv = CryptoJS.enc.Utf8.parse(process.env.VUE_APP_IV);

加密函數

我們寫一個函數來加密信息。這個函數接收一段明文（也就是正常能看懂的文字），然后返回加密后的文字。

// AES加密函數
export function encrypt(text: string): string {
  // 使用 CryptoJS 的 AES 方法加密文本
  const encrypted = CryptoJS.AES.encrypt(text, key, {
    mode: CryptoJS.mode.ECB, // 使用 ECB 模式
    padding: CryptoJS.pad.Pkcs7, // 使用 PKCS7 填充
    iv: iv // 使用偏移量
  });
  // 將加密后的數據轉換成 Base64
  const base64Cipher = encrypted.ciphertext.toString(CryptoJS.enc.Base64);
  // 處理 Android 某些低版本的 BUG
  // 替換某些特殊字符，因為加密后的 Base64 字符串在某些設備上會有問題
  const resultCipher = base64Cipher.replace(/\+/g, "-").replace(/\//g, "_");
  // 返回加密后的經過處理的 Base64
  return resultCipher;
}

解密函數

我們還需要一個函數來解密信息。這個函數接收加密后的文字，然后返回正常的明文。

// AES解密函數
export function decrypt(encryptData: string): string {
  try {
    // 先將 Base64 還原一下，因為加密的時候做了一些字符的替換
    const restoreBase64 = encryptData.replace(/\-/g, "+").replace(/_/g, "/");
    // 解密
    const decryptedContent = CryptoJS.AES.decrypt(restoreBase64, key, {
      mode: CryptoJS.mode.ECB, // 使用 ECB 模式
      padding: CryptoJS.pad.Pkcs7, // 使用 PKCS7 填充
      iv: iv // 使用偏移量
    });
    // 將解密對象轉換成 UTF8 的字符串
    const resultDecipher = CryptoJS.enc.Utf8.stringify(decryptedContent);
    // 返回解密結果
    return resultDecipher;
  } catch (error) {
    // 如果解密失敗，返回空字符串
    return ""; 
  }
}

如何在 Vue.js 項目中使用

假設我們有了上面的加密和解密函數，現在要在 Vue.js 項目中使用它們。

創(chuàng)建一個 Vue 組件

我們創(chuàng)建一個簡單的 Vue 組件，讓用戶輸入一些信息，然后可以加密和解密。

<template>
  <div>
    <input type="text" v-model="plaintext" placeholder="請輸入明文" />
    <button @click="encryptText">加密</button>
    <button @click="decryptText">解密</button>
    <p>加密后的文本: {{ ciphertext }}</p>
    <p>解密后的文本: {{ decryptedText }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { encrypt, decrypt } from './crypto'; // 導入我們寫的加密和解密函數
// 定義響應式狀態(tài)
const plaintext = ref('');
const ciphertext = ref('');
const decryptedText = ref('');
// 加密文本
function encryptText() {
  ciphertext.value = encrypt(plaintext.value);
}
// 解密文本
function decryptText() {
  decryptedText.value = decrypt(ciphertext.value);
}
</script>

到此這篇關于Vue3 使用CryptoJS加密的文章就介紹到這了,更多相關Vue3 CryptoJS加密內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: