vue3中使用crypto-js库进行加密/解密

使用crypto-js库进行加密/解密

在这里插入图片描述

安装

npm install crypto-js

基本使用

<template><div>使用crypto-js库进行加密/解密</div>
</template><script setup>
import CryptoJS from 'crypto-js';
import { onMounted } from 'vue';// 加密函数
const encryptMessage = (message, key) => {// AES 加密const ciphertext = CryptoJS.AES.encrypt(message, key).toString();return ciphertext;
}// 解密函数
const decryptMessage = (ciphertext, key) => {// AES 解密const bytes = CryptoJS.AES.decrypt(ciphertext, key);const originalText = bytes.toString(CryptoJS.enc.Utf8);return originalText;
}// 要加密的原始消息和密钥
const originalMessage = 'Hello, world!';
const encryptionKey = 'goto_w'; // 16 bytes (128 bits)onMounted(() => {// 加密消息const encryptedMessage = encryptMessage(originalMessage, encryptionKey);console.log('加密后的消息:', encryptedMessage);// 解密消息const decryptedMessage = decryptMessage(encryptedMessage, encryptionKey);console.log('解密后的消息:', decryptedMessage);
})
</script>

封装成一个工具函数,支持常见的数据类型(字符串,数组,对象)

// 导入 CryptoJS 模块
import CryptoJS from 'crypto-js';/*** @description: 加解密函数* @param {*} data 需要加密的数据* @param {*} key 加密密钥* @return {*} 返回加密后的数据*/// 加密函数
function encrypt(data, key) {// 将不同类型的数据转换为字符串const dataString = JSON.stringify(data);// AES 加密const ciphertext = CryptoJS.AES.encrypt(dataString, key).toString();return ciphertext;
}// 解密函数
function decrypt(ciphertext, key) {// AES 解密const bytes  = CryptoJS.AES.decrypt(ciphertext, key);const decryptedString = bytes.toString(CryptoJS.enc.Utf8);// 将 JSON 字符串转换回原始数据const decryptedData = JSON.parse(decryptedString);return decryptedData;
}export { encrypt, decrypt };

使用加密/解密的工具函数

<template><div>使用crypto-js库进行加密/解密</div>
</template><script setup>
import { onMounted } from 'vue';
import { encrypt, decrypt } from '@/utils/crypto';onMounted(() => {const ciphertext = encrypt({ name: 'goto_w', age: 18 }, 'goto_w')console.log(ciphertext);const decryptedData = decrypt(ciphertext, 'goto_w')console.log(decryptedData);
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/6416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用分辨率

720p: 720 1280 720\times1280 72012801080P: 1920 1080 1920 \times 1080 192010802K: 2048 1152 2048\times1152 204811524K: 4096 2160 4096\times2160 40962160

代码随想录训练营30-动态规划3

一、0/1背包问题 参考博客&#xff0c;主要注意以下几个方面&#xff1a; 1 背包问题要素&#xff1a; 背包容积、物品价值、物品体积 2 dp含义&#xff0c;dp[j]表示为j体积下&#xff0c;最大的物品价值。 3 遍历顺序&#xff0c;如果是二维写法&#xff0c;可以不关心顺…

【C语言】/*printf 函数*/

目录 printf 函数 1.1 语法形式 1.2 基本使用 1.3 占位符 1.4 占位符的输出格式 1.4.1 限定宽度 1.4.2 总是显⽰正负号 1.4.3 限定⼩数位数 1.4.4 输出部分字符串 printf 函数 1.1 语法形式 语法形式&#xff1a;int printf(const char* format, ...); 功能&#xff…

记某APP登录逆向解密过程

最近在学习APP逆向相关的知识&#xff0c;刚好拿到了一个APP目标&#xff0c;该APP登录过程存在加密&#xff0c;所以记录下逆向破解的过程。流程 先介绍下拿到该APP后续所做的一些工作流程 选择相应版本安装到测试机当中进行抓包&#xff0c;查看数据包分析登录请求包&#x…

中国目前比较有影响力的人物颜廷利:不能升命, 活着何用?

不能‘升命’&#xff0c; 活着何用&#xff1f;…&#xff08;升命学说&#xff09; 21世纪东方哲学家思想家、科学家、当代中国教育界知名教授、专业周易起名改名字、易经姓名学专家、目前比较有影响力的人物、现代国学大师泰斗杰出代表颜廷利教授在《升命学说》‘净化论’里…

PCL 点云中的平面点云提取

平面点云提取 一. 索引提取1.1 算法概念1.2 算法流程1.3 主要函数二.代码示例三.结果示例一. 索引提取 1.1 算法概念 平面点云提取:是指从点云数据中提取出属于平面的点的过程。 1.2 算法流程 使用pcl::SACSegmentation类进行点云分割的基本步骤如下: 创建一个pcl::SACSegm…

Java 类与对象

目录 1 类是什么 1.1 面向对象 1.2 面向对象与面向过程 2 类定义和使用 2.1 类的定义格式 2.2 练习定义一个狗类 3 类的实例化 4 this引用 5 对象的构造与初始化 5.1 构造方法与初始化 5.2 默认初始化 5.3 就地初始化 1 类是什么 关于类是什么&#xff0c;我们需要对…

开源版本管理系统的搭建一:SVN服务端安装

作者&#xff1a;私语茶馆 1.Windows搭建SVN版本管理系统 点评&#xff1a;SVN本身非常简洁易用&#xff0c;VisualSVN文档支撑非常好&#xff0c;客户端TortoiseSVN非常专业。5星好评。 1.1.SVN概要和组成 背景介绍 Svn是一个开源版本管理系统&#xff0c;由CollabNet公司…

一、Mysql索引的底层数据结构与算法

Mysql索引的底层数据结构与算法 前言一、索引数据结构为什么 MySQL 的索引要使用 B 树而不是其他树形结构?比如 B 树?为什么InnoDB存储引擎选择使用Btree索引结构&#xff1f; 二、索引分类思考&#xff1a;以下SQL语句&#xff0c;那个执行效率高&#xff1f;为什么&#xf…

SQL如何利用Bitmap思想优化array_contains()函数

目录 0 问题描述 1 位图思想 2 案例实战 3 小结 0 问题描述 在工作中&#xff0c;我们往往使用array_contains()函数来进行存在性问题分析&#xff0c;如判断某个数是否在某个数组中&#xff0c;但是当表数据量过多&#xff0c;存在大量array_contains()函数时&#xff0c;…

【软件测试】测试用例设计方法

1. 等价类划分法1.1. 等价类划分法的定义1.2. 有效等价类和无效等价类1.3. 等价类划分法实例分析 2. 边界值分析法2.1. 边界值分析法的定义2.2. 边界点2.3. 边界值法实例分析 3. 判定表法3.1. 如何用判定表法设计测试用例3.2. 判定表法实例分析 4. 正交表法4.1. 什么是正交表4.…

Spring扩展点(二)Spring事务生命周期

Spring事务生命周期 Spring事务事务生命周期 接口 TransactionSynchronizationTransactionalEventListener&#xff08;另一种监听事务周期的方式&#xff09; Spring事务 Spring对JDBC事务做了封装&#xff0c;使其易于使用。主要分为声明式事务和编程式事务。 Transactiona…

批量美化图片,轻松实现多张图片描边,让图片瞬间焕发新生!

图片已成为我们日常生活中不可或缺的一部分。无论是社交媒体上的个人分享&#xff0c;还是商业宣传中的产品展示&#xff0c;高质量、精美的图片都扮演着至关重要的角色。然而&#xff0c;对于许多人来说&#xff0c;图片处理仍然是一个令人头疼的问题。现在&#xff0c;我们为…

商超物联网方案-Hotspot Service和客流分析方案概述

商超物联网方案-Hotspot Service和客流分析方案概述 场景概述 大型商场、大型综合体在相互竞争及线上消费的影响下&#xff0c;利润增长缓慢&#xff0c;迫切需要通过提供个性化服务提升顾客购物体验&#xff0c;促进利润增长。 向不同顾客推送其感兴趣的广告&#xff0c;不仅…

NodeJS中实现一个真正的Sleep,Sleep期间不影响其它线程执行

NodeJS中实现一个真正的Sleep&#xff0c;Sleep期间不影响其它线程执行 Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它采用了单线程、事件驱动和非阻塞I/O模型。由于JavaScript是单线程的&#xff0c;传统意义上的线程睡眠&#xff08;如Java中的Thread.…

c++游戏小技巧16:实例1(地牢生成算法)

1.前言 (头图) &#xff08;其实最开始是想写恶魔轮盘的&#xff0c;但没想到它竟然更新了&#xff09; &#xff08;等我有时间在更&#xff0c;最近很忙&#xff0c;玩第五玩的&#xff09; 想法来源&#xff1a;房间和迷宫&#xff1a;一个地牢生成算法https://indienova…

机器学习(五)之损失函数

上面几节讲了监督学习和非监督学习的一些算法&#xff08;目前还不完整&#xff0c;会慢慢补充哒) 如果文章内容有错误&#xff0c;欢迎小伙伴在评论区指出! 前言&#xff1a; 损失函数在机器学习中非常重要&#xff0c;直接关乎模型的好坏&#xff08;so?学好它&#xff09;…

STM32G474 CMAKE VSCODE 开发环境搭建

本篇博文尝试搭建 stm32g474 的开发环境 一. 工具安装 1. 关于 MinGW、OpenOCD、Zadig 这些工具的下载和安装见 JlinkOpenOCDSTM32 Vscode 下载和调试环境搭建_vscode openocd stm32 jlink-CSDN博客 2. 导出一个 STM32 的 CMAKE 工程&#xff0c;这里略过。 3. 安装 ninja …

matlab期末知识

1.期末考什么&#xff1f; 1.1 matlab操作界面 &#xff08;1&#xff09;matlab主界面 &#xff08;2&#xff09;命令行窗口 &#xff08;3&#xff09;当前文件夹窗口 &#xff08;4&#xff09;工作区窗口 &#xff08;5&#xff09;命令历史记录窗口 1.2 matlab搜索…

用C#写一个特性,在函数上面可以自动计算函数耗时情况

用C#写一个特性&#xff0c;在函数上面可以自动计算函数耗时情况 TimingAttribute类是自定义的特性类&#xff0c;用来标记需要计时的方法。TimingInterceptor类是一个拦截器&#xff0c;它通过反射来拦截被TimingAttribute标记的方法&#xff0c;并在方法执行前后进行计时。My…