Vue3 如何使用CryptoJS加密

二马三原

为什么要加密？

现在的互联网世界充满了各种各样的信息，有些信息非常重要，比如密码、个人信息等。如果我们把这些信息直接发送到服务器，别人可能会截取到，然后偷走我们的信息。为了避免这种情况发生，我们需要把重要的信息变成别人看不懂的东西，这就是加密的作用。

CryptoJS 是什么？

CryptoJS 是一个非常好用的 JavaScript 库，它能帮我们加密和解密信息。这个库很小巧，而且功能很强大，支持很多种加密方法。我们这里主要用它的 AES 加密功能。

如何安装 CryptoJS？

首先，我们需要在项目里安装 CryptoJS。可以用下面的命令来安装：

1. npm install crypto-js

复制代码

或者

1. yarn add crypto-js

复制代码

如何加密和解密？

现在我们已经有了 CryptoJS，接下来就可以写代码来加密和解密信息了。

密钥和偏移量

加密需要一把“钥匙”，这把钥匙就是密钥。另外还有一个叫“偏移量”的东西，它可以帮助我们更好地加密信息。这两个东西一定要保密，不能让别人知道。

1. import * as CryptoJS from "crypto-js";
   
2. // 密钥和偏移量
   
3. // 这里使用环境变量来设置密钥和偏移量，确保它们的安全性
   
4. const key = CryptoJS.enc.Utf8.parse(process.env.VUE_APP_KEY);
   
5. const iv = CryptoJS.enc.Utf8.parse(process.env.VUE_APP_IV);

复制代码

加密函数
我们写一个函数来加密信息。这个函数接收一段明文（也就是正常能看懂的文字），然后返回加密后的文字。

1. // AES加密函数
   
2. export function encrypt(text: string): string {
   
3.   // 使用 CryptoJS 的 AES 方法加密文本
   
4.   const encrypted = CryptoJS.AES.encrypt(text, key, {
   
5.     mode: CryptoJS.mode.ECB, // 使用 ECB 模式
   
6.     padding: CryptoJS.pad.Pkcs7, // 使用 PKCS7 填充
   
7.     iv: iv // 使用偏移量
   
8.   });
   
9.   // 将加密后的数据转换成 Base64
   
10.   const base64Cipher = encrypted.ciphertext.toString(CryptoJS.enc.Base64);
    
11.   // 处理 Android 某些低版本的 BUG
    
12.   // 替换某些特殊字符，因为加密后的 Base64 字符串在某些设备上会有问题
    
13.   const resultCipher = base64Cipher.replace(/\+/g, "-").replace(/\//g, "_");
    
14.   // 返回加密后的经过处理的 Base64
    
15.   return resultCipher;
    
16. }

复制代码

解密函数
我们还需要一个函数来解密信息。这个函数接收加密后的文字，然后返回正常的明文。

1. // AES解密函数
   
2. export function decrypt(encryptData: string): string {
   
3.   try {
   
4.     // 先将 Base64 还原一下，因为加密的时候做了一些字符的替换
   
5.     const restoreBase64 = encryptData.replace(/\-/g, "+").replace(/_/g, "/");
   
6.     // 解密
   
7.     const decryptedContent = CryptoJS.AES.decrypt(restoreBase64, key, {
   
8.       mode: CryptoJS.mode.ECB, // 使用 ECB 模式
   
9.       padding: CryptoJS.pad.Pkcs7, // 使用 PKCS7 填充
   
10.       iv: iv // 使用偏移量
    
11.     });
    
12.     // 将解密对象转换成 UTF8 的字符串
    
13.     const resultDecipher = CryptoJS.enc.Utf8.stringify(decryptedContent);
    
14.     // 返回解密结果
    
15.     return resultDecipher;
    
16.   } catch (error) {
    
17.     // 如果解密失败，返回空字符串
    
18.     return "";
    
19.   }
    
20. }

复制代码

如何在 Vue.js 项目中使用

假设我们有了上面的加密和解密函数，现在要在 Vue.js 项目中使用它们。
创建一个 Vue 组件
我们创建一个简单的 Vue 组件，让用户输入一些信息，然后可以加密和解密。

1. <template>
   
2.   <div>
   
3.     <input type="text" v-model="plaintext" placeholder="请输入明文" />
   
4.     <button @click="encryptText">加密</button>
   
5.     <button @click="decryptText">解密</button>
   
6.     <p>加密后的文本: {{ ciphertext }}</p>
   
7.     <p>解密后的文本: {{ decryptedText }}</p>
   
8.   </div>
   
9. </template>
   
10. <script setup>
    
11. import { ref } from 'vue';
    
12. import { encrypt, decrypt } from './crypto'; // 导入我们写的加密和解密函数
    
13. // 定义响应式状态
    
14. const plaintext = ref('');
    
15. const ciphertext = ref('');
    
16. const decryptedText = ref('');
    
17. // 加密文本
    
18. function encryptText() {
    
19.   ciphertext.value = encrypt(plaintext.value);
    
20. }
    
21. // 解密文本
    
22. function decryptText() {
    
23.   decryptedText.value = decrypt(ciphertext.value);
    
24. }
    
25. </script>

复制代码

到此这篇关于Vue3 使用CryptoJS加密的文章就介绍到这了,更多相关Vue3 CryptoJS加密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/328883lay.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！