【Vue】使用CryptoJS进行加密解密

<template>
  <div>
    <input v-model="input" placeholder="Enter text">
    <button @click="encryptText">Encrypt</button>
    <button @click="decryptText">Decrypt</button>
    <p>Encrypted Text: {{ encrypted }}</p>
    <p>Decrypted Text: {{ decrypted }}</p>
  </div>
</template>
 
<script>
import CryptoJS from 'crypto-js'
 
export default {
  data() {
    return {
      input: '',
      encrypted: '',
      decrypted: ''
    }
  },
  methods: {
    encryptText() {
      this.encrypted = CryptoJS.AES.encrypt(this.input, 'secret_key_123').toString();
    },
    decryptText() {
      let bytes = CryptoJS.AES.decrypt(this.encrypted, 'secret_key_123');
      this.decrypted = bytes.toString(CryptoJS.enc.Utf8);
    }
  }
}
</script>

这段代码使用了Vue框架和CryptoJS库来实现一个简单的加密解密功能。用户可以在输入框中输入文本，然后点击相应的按钮进行加密或解密。加密时使用了AES算法并且密钥是'secret\_key\_123'，解密时则使用了相同的密钥来完成。在实际应用中，密钥应当保密并且尽可能复杂以提高安全性。