目次为什么要加密？现在的互联网天下布满了各种各样的信息，有些信息非常重要，好比密码、个人信息等。假如我们把这些信息直接发送到服务器，别人大概会截取到，然后偷走我们的信息。为了避免这种环境发生，我们必要把重要的信息变成别人看不懂的东西，这就是加密的作用。 CryptoJS 是什么？CryptoJS 是一个非常好用的 JavaScript 库，它能帮我们加密息争密信息。这个库很小巧，而且功能很强盛，支持很多种加密方法。我们这里重要用它的 AES 加密功能。 怎样安装 CryptoJS？首先，我们必要在项目里安装 CryptoJS。可以用下面的命令来安装： [code]npm install crypto-js[/code]或者 [code]yarn add crypto-js[/code]怎样加密息争密？现在我们已经有了 CryptoJS，接下来就可以写代码来加密息争密信息了。 密钥和偏移量加密必要一把“钥匙”，这把钥匙就是密钥。另外还有一个叫“偏移量”的东西，它可以资助我们更好地加密信息。这两个东西一定要保密，不能让别人知道。 [code]import * as CryptoJS from "crypto-js"; // 密钥和偏移量 // 这里使用环境变量来设置密钥和偏移量，确保它们的安全性 const key = CryptoJS.enc.Utf8.parse(process.env.VUE_APP_KEY); const iv = CryptoJS.enc.Utf8.parse(process.env.VUE_APP_IV);[/code]加密函数 我们写一个函数来加密信息。这个函数接收一段明文（也就是正常能看懂的笔墨），然后返回加密后的笔墨。 [code]// 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; }[/code]解密函数 我们还必要一个函数来解密信息。这个函数接收加密后的笔墨，然后返回正常的明文。 [code]// 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 ""; } }[/code]怎样在 Vue.js 项目中使用假设我们有了上面的加密息争密函数，现在要在 Vue.js 项目中使用它们。 创建一个 Vue 组件 我们创建一个简单的 Vue 组件，让用户输入一些信息，然后可以加密息争密。 [code]<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'; // 导入我们写的加密息争密函数 // 界说响应式状态 const plaintext = ref(''); const ciphertext = ref(''); const decryptedText = ref(''); // 加密文本 function encryptText() { ciphertext.value = encrypt(plaintext.value); } // 解密文本 function decryptText() { decryptedText.value = decrypt(ciphertext.value); } </script>[/code]到此这篇关于Vue3 使用CryptoJS加密的文章就介绍到这了,更多相关Vue3 CryptoJS加密内容请搜索脚本之家以前的文章或继续欣赏下面的相关文章希望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/328883lay.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:06 , Processed in 0.033042 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
