uni-app CryptoJS AES加密在vue3中的使用

在Vue 3中使用uni-app结合CryptoJS进行AES加密，可以通过以下步骤实现。这里我们将展示如何在Vue 3组件中使用CryptoJS库进行AES加密操作。首先，你需要确保你的项目中已经安装了CryptoJS库。你可以通过npm安装它：

npm install crypto-js

接下来，我们创建一个Vue 3组件，并在其中使用CryptoJS进行AES加密。以下是示例代码：

<template>
  <div>
    <input v-model="plainText" placeholder="Enter plain text" />
    <button @click="encryptText">Encrypt</button>
    <p>Encrypted Text: {{ encryptedText }}</p>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js';

export default {
  data() {
    return {
      plainText: '',
      encryptedText: '',
      secretKey: 'my-secret-key-123' // This should be kept secure
    };
  },
  methods: {
    encryptText() {
      const cipherText = CryptoJS.AES.encrypt(this.plainText, this.secretKey).toString();
      this.encryptedText = cipherText;
    },
    // Optionally, you might want a decrypt method for testing
    decryptText(cipherText) {
      const bytes = CryptoJS.AES.decrypt(cipherText, this.secretKey);
      const originalText = bytes.toString(CryptoJS.enc.Utf8);
      return originalText;
    }
  },
  mounted() {
    // Example: Encrypt and decrypt a sample text when the component mounts
    const sampleText = 'Hello, World!';
    this.encryptText(); // Encrypt the sample text
    console.log('Decrypted Sample Text:', this.decryptText(this.encryptedText)); // Decrypt for verification
  }
};
</script>

<style scoped>
input {
  margin-bottom: 10px;
  padding: 5px;
  font-size: 16px;
}
button {
  padding: 5px 10px;
  font-size: 16px;
}
</style>

在上面的代码中，我们创建了一个简单的Vue组件，其中包含一个输入框用于输入明文，一个按钮用于触发加密操作，以及一个段落用于显示加密后的文本。我们使用v-model绑定输入框的值到组件的plainText数据属性。

encryptText方法使用CryptoJS的AES.encrypt函数对明文进行加密，并将加密后的密文转换为字符串格式存储在encryptedText属性中。

我们还提供了一个可选的decryptText方法，用于解密加密后的文本，这在测试或开发过程中可能很有用。注意，在实际应用中，解密操作通常是在服务器端进行的，以确保密钥的安全。

在mounted生命周期钩子中，我们演示了如何使用encryptText和decryptText方法对示例文本进行加密和解密，并将解密结果输出到控制台以进行验证。