建材网站建设方案,免费wap建站,wordpress扫码收款,小程序制作拼图为什么要加密#xff1f;
现在的互联网世界充满了各种各样的信息#xff0c;有些信息非常重要#xff0c;比如密码、个人信息等。如果我们把这些信息直接发送到服务器#xff0c;别人可能会截取到#xff0c;然后偷走我们的信息。为了避免这种情况发生#xff0c;我们需…为什么要加密
现在的互联网世界充满了各种各样的信息有些信息非常重要比如密码、个人信息等。如果我们把这些信息直接发送到服务器别人可能会截取到然后偷走我们的信息。为了避免这种情况发生我们需要把重要的信息变成别人看不懂的东西这就是加密的作用。
CryptoJS 是什么
CryptoJS 是一个非常好用的 JavaScript 库它能帮我们加密和解密信息。这个库很小巧而且功能很强大支持很多种加密方法。我们这里主要用它的 AES 加密功能。
如何安装 CryptoJS
首先我们需要在项目里安装 CryptoJS。可以用下面的命令来安装
npm install crypto-js或者
yarn add crypto-js如何加密和解密
现在我们已经有了 CryptoJS接下来就可以写代码来加密和解密信息了。
密钥和偏移量
加密需要一把“钥匙”这把钥匙就是密钥。另外还有一个叫“偏移量”的东西它可以帮助我们更好地加密信息。这两个东西一定要保密不能让别人知道。
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);加密函数
我们写一个函数来加密信息。这个函数接收一段明文也就是正常能看懂的文字然后返回加密后的文字。
// 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 // 使用偏移量});// 将加密后的数据转换成 Base64const base64Cipher encrypted.ciphertext.toString(CryptoJS.enc.Base64);// 处理 Android 某些低版本的 BUG// 替换某些特殊字符因为加密后的 Base64 字符串在某些设备上会有问题const resultCipher base64Cipher.replace(/\/g, -).replace(/\//g, _);// 返回加密后的经过处理的 Base64return resultCipher;
}解密函数
我们还需要一个函数来解密信息。这个函数接收加密后的文字然后返回正常的明文。
// 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 ; }
}如何在 Vue.js 项目中使用
假设我们有了上面的加密和解密函数现在要在 Vue.js 项目中使用它们。
创建一个 Vue 组件
我们创建一个简单的 Vue 组件让用户输入一些信息然后可以加密和解密。
templatedivinput typetext v-modelplaintext placeholder请输入明文 /button clickencryptText加密/buttonbutton clickdecryptText解密/buttonp加密后的文本: {{ ciphertext }}/pp解密后的文本: {{ decryptedText }}/p/div
/templatescript 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
