Vue使用AES加密

Li_pk發表於2024-05-16
Vue加密

1. 安裝crypto-js庫：

npm install crypto-js
# 或
yarn add crypto-js

2. 封裝encryption.js

// utils/encryption.js
import CryptoJS from 'crypto-js';

// AES加密
export function encrypt(text, key) {
  return CryptoJS.AES.encrypt(text, key).toString();
}

// AES解密
export function decrypt(ciphertext, key) {
  const bytes = CryptoJS.AES.decrypt(ciphertext, key);
  return bytes.toString(CryptoJS.enc.Utf8);
}

3. 使用

<template>
  <div>
    <h1>AES Encryption Example</h1>
    <input v-model="inputText" placeholder="Enter text to encrypt" />
    <input v-model="encryptionKey" placeholder="Enter encryption key" />
    <button @click="handleEncrypt">Encrypt</button>
    <button @click="handleDecrypt">Decrypt</button>
    <p>Encrypted Text: {{ encryptedText }}</p>
    <p>Decrypted Text: {{ decryptedText }}</p>
  </div>
</template>

<script>
// 匯入封裝好的加解密方法
import { encrypt, decrypt } from '@/utils/encryption';

export default {
  data() {
    return {
      inputText: '',
      encryptionKey: '',
      encryptedText: '',
      decryptedText: ''
    };
  },
  methods: {
    handleEncrypt() {
      this.encryptedText = encrypt(this.inputText, this.encryptionKey);
    },
    handleDecrypt() {
      this.decryptedText = decrypt(this.encryptedText, this.encryptionKey);
    }
  }
};
</script>

<style scoped>
/* 新增一些簡單的樣式 */
input {
  margin-bottom: 10px;
  display: block;
}
button {
  margin-right: 10px;
}
</style>

相關文章