当前位置: 首页 > news >正文

前端插件库-VUE3 使用 JSEncrypt 插件

JSEncrypt 是一个用于在客户端进行加密的 JavaScript 库。它基于 RSA 加密算法,可以用于在浏览器中对数据进行加密和解密操作。

以下是使用 JSEncrypt 进行加密和解密的基本示例:

第一步:安装 JSEncrypt  

首先,你需要引入 JSEncrypt 库。你可以在项目中添加 JSEncrypt 的脚本文件,或者使用 CDN:

<!-- 使用 CDN 引入 JSEncrypt 脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.0.0/jsencrypt.min.js"></script>

or(或者)

npm install jsencrypt

第二步:枚举公/私钥

@src/config/map/index.js

// 设置公钥、私钥(通常从服务器获取,这里仅为示例)
const publicKey = 'MIGfMA0GCSqGSIb3DQEBCBiQKBgQCOvCfR4vqp1Nknj4PA3jZm9+Hq8tiH5tubX3UjKx5b71r+jRaSgLGd0ZA3ZK380EAXB99su0p62jfiAX7anOXRrBGqeXEhVCpNCRsUw/JwvjyEJ284FVXicNJNVVORnj+bOJx6Ue3iXFlkbQWocR8LXvjXFzftQIDAQAB';
const privateKey = 'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAI68J9Hi+qlsbJxnLClhNfVzU2SePg8DeNmb34ery2Ifm25tfdSMrHlvvWv6NFpKAsZ3RkDdkrfzQQBcH32y7SnraN+IBftqc5dGsEap5cSFUKk0JGxTD8nC+PIQnbzgVVeJw0k1VU5GeP5s4+NcXN+1AgMBAAECgYBpz3PZdOELDbRqMVWci1Lb1RBRtsLfqGEGpCVKU+Lpxx+PlVWWP88gMUOFob+REyX+zcx8Chwy9o6mBXDvcaVbo8oLDnumqxTMQ7uRGIl92Nt5OvtVp/hImxBQgEdEw0PQ6jKUjTaoP3t9Z0iJVZGaRsGdQJBAP5Iz9iJ+sxCRFFknr075wk84N/3G7lD5NmX3y+ZN8XhyCfoCXhRgB9xELdqAjFWDx8CQQCPsq5CXe6WhEHAAr6MvG1W2YtIAfFFqaVbvbgy8SuTYAJYWSz+NTwDSQcQFcKGoUXsrtNZqaqM/uqv0HJB1HqrAkEA9yIwztUaKWtID0Assq+V+BqWmIt2vQnSeACAvo2Pd0zxiPoSubYgntGZmhshN3K+IvrC6WrcSLKMepXO18A6JQJAAYoKb8+NxLL5+VKOM/e4vBtscIME0Jg2mzr3BCStMNDwdX3PC5IKaIaZusRg5wxHMXfV77nvh78bSHLVJnteLQJBAN55a/qiELgCMN6ZOne6FageR5B3gMaVDNJsCOcBwJpFRcW8cxssv4TNUfqfn1VwBeqtO9zVDVLNZ+OxFJme3u4=';export {publicKey,privateKey
};

  第三步:封装加密解密方法

   @src/config/utils/index.js

import { JSEncrypt } from 'jsencrypt';
import { publicKey, privateKey } from '@map/index.js';// 加密
function encryptText(text) {const instance = new JSEncrypt();instance.setPublicKey(publicKey);return instance.encrypt(text);
}// 解密
function decryptText(text) {const instance = new JSEncrypt();instance.setPrivateKey(privateKey);return instance.decrypt(text);
}export {encryptText,decryptText,
}

  第四步:组件中使用 

<script setup>import { ref } from 'vue';import { encryptText, decryptText } from '@utils';const loginForm = ref({});const submit = () => {let { password, username } = loginForm.value || {}let resLoginInforesLoginInfo['password'] = encryptText(password)resLoginInfo['username'] = encryptText(username)        /*{ password:'O+dmiGTQLhvvIGPHZewL431msOIQvmt7M0L4jC9MyOEKRPvX5BNR8TWqPSb0dJoc=',             username:'WURTJuEE9S+v4gbEcQWH9VC14k7M0L4jC9MyOEKRPvX5BNR8TWnS5H7ycV8fMYng='}*/}
</script>

相关文章:

前端插件库-VUE3 使用 JSEncrypt 插件

JSEncrypt 是一个用于在客户端进行加密的 JavaScript 库。它基于 RSA 加密算法&#xff0c;可以用于在浏览器中对数据进行加密和解密操作。 以下是使用 JSEncrypt 进行加密和解密的基本示例&#xff1a; 第一步&#xff1a;安装 JSEncrypt 首先&#xff0c;你需要引入 JSEn…...

Neo4j备份

这里主要讲Neo4j在windows环境下如何备份&#xff0c;Linux环境同理 Neo4j恢复看这里:Neo4j恢复-CSDN博客 Step1:停服 关闭neo4j.bat console会话窗口即可 Step2: 备份 找到数据目录&#xff0c;并备份、压缩 copy即可 data - 20240108.7z Step3: 启动服务 进入命令行&am…...

【LangChain学习之旅】—(5) 提示工程(上):用少样本FewShotTemplate和ExampleSelector创建应景文案

【LangChain学习之旅】—&#xff08;5&#xff09; 提示工程&#xff08;上&#xff09;&#xff1a;用少样本FewShotTemplate和ExampleSelector创建应景文案 提示的结构LangChain 提示模板的类型使用 PromptTemplate使用 ChatPromptTemplateFewShot 的思想起源使用 FewShotPr…...

Python从入门到精通秘籍一

Python速成,知识点超详细,跟着这个系列边输入边学习体会吧! 一、字面量 下面是一些使用代码示例来说明Python的字面量的具体用法: 1.数字字面量: integer_literal = 42 # 整数字面量 float_literal = 3.14 # 浮点数字面量 complex_literal = 2 + 3j # 复数字面量# …...

【IC设计】移位寄存器

目录 理论讲解背景介绍什么是移位寄存器按工作模式分类verilog语法注意事项 设计实例循环移位寄存器算术双向移位寄存器5位线性反馈移位寄存器伪随机码发生器3位线性反馈移位寄存器32位线性反馈移位寄存器串行移位寄存器&#xff08;打4拍&#xff09;双向移位寄存器&#xff1…...

【Flutter 开发实战】Dart 基础篇:最基本的语法内容

在深入了解 Dart 这门编程语言之前&#xff0c;我们需要了解一些关于 Dart 的最基本的知识&#xff0c;像是常量、变量、函数等等&#xff0c;这样才能够让我们的开发效率更上一层楼。在本节&#xff0c;我们将探讨一些基础语法&#xff0c;包括入口方法 main、变量、常量以及命…...

中国光伏展

中国光伏展是中国最大的光伏产业展览会&#xff0c;每年在国内举办一次。该展览会汇集了国内外光伏行业的领先企业和专业人士&#xff0c;展示最新的光伏技术、产品和解决方案。 中国光伏展旨在促进光伏行业的发展和创新&#xff0c;提升光伏产业的国际竞争力。展览会涵盖了光伏…...

Nacos的统一配置管理

Nacos的统一配置管理 一 项目添加nacos和bootstrap依赖二 nacos客户端配置2.1 创建命名空间2.2 创建配置 三、配置bootstrap.yml四 不同环境配置切换步骤一&#xff1a;nacos中添加开发、测试配置步骤二&#xff1a;指定bootstrap.yml中spring.profiles.active参数值 扩展链接 …...

SpringBoot项目docker镜像生成

1. 本文思路 拉取基础镜像基于镜像创建容器在容器中&#xff0c;安装所需依赖部署脚本提交容器&#xff0c;生成新的镜像编写Dockerfile&#xff0c;添加启动命令&#xff0c;生成最终镜像导出镜像 2. 操作步骤 2.1 基础环境 # 拉取镜像 docker pull centos:7.6.1810 # 运行…...

JDBC初体验(二)——增、删、改、查

本课目标 理解SQL注入的概念 掌握 PreparedStatement 接口的使用 熟练使用JDBC完成数据库的增、删、改、查操作 SQL注入 注入原理&#xff1a;利用现有应用程序&#xff0c;将&#xff08;恶意的&#xff09;SQL命令注入到后台数据库引擎执行能力&#xff0c;它可以通过在…...

Eva.js是什么(互动小游戏开发)

前言 Eva.js 是一个专注于开发互动游戏项目的前端游戏引擎。 易用&#xff1a;Eva.js 提供开箱即用的游戏组件供开发人员立即使用。是的&#xff0c;它简单而优雅&#xff01; 高性能&#xff1a;Eva.js 由高效的运行时和渲染管道 (Pixi.JS) 提供支持&#xff0c;这使得释放设…...

监听 beforeunload 事件,阻止页面刷新导致的信息丢失

尤其是一个有编辑器的页面&#xff0c;可以监听 windwo.beforeunload 事件&#xff0c;在用户试图关闭当前标签页的时候提醒用户&#xff0c;内容可能会丢失。 Window&#xff1a;beforeunload 事件 - Web API 接口参考 | MDN...

Java 常见缓存详解以及解决方案

一. 演示Mybatis 一级缓存 首先我们准备一个接口 两个实现的方法&#xff0c; 当我们调用这个queryAll&#xff08;&#xff09;方法时我们需要调用selectAll&#xff08;&#xff09;方法来查询数据 调用此接口实现效果 这个时候我们就可以发现了问题&#xff0c;我们调用方法…...

Golang 交叉编译之一文详解

博客原文 文章目录 Golang 中的交叉编译不同操作系统间的编译Linux 下编译windowsmacos windows 下编译Linuxmacos macos 下编译Linuxwindows 不同架构下的编译amd64x86 参考 Golang 中的交叉编译 在 Golang 中&#xff0c;交叉编译指的是在同一台机器上生成针对不同操作系统或…...

最新ThinkPHP版本实现证书查询系统,实现批量数据导入,自动生成电子证书

前提&#xff1a;朋友弄了一个培训机构&#xff0c;培训考试合格后&#xff0c;给发证书&#xff0c;需要一个证书查询系统。委托我给弄一个&#xff0c;花了几个晚上给写的证书查询系统。 实现功能&#xff1a; 前端按照姓名手机号码进行证书查询证书信息展示证书展示&#x…...

windows安装运行Apache James(基于spring的版本)

下载地址 下载列表 https://james.apache.org/download.cgi 直接下载基于spring版本 https://www.apache.org/dyn/closer.lua/james/server/3.8.0/james-server-app-3.8.0-app.zip 设置签名 解压&#xff0c;并切换到james-server-spring-app-3.8.0目录下&#xff0c;在powe…...

Elasticsearch 基本概念:快速入门指南【记录】

简单记录&#xff0c;后续整理补充 介绍&#xff1a; Elasticsearch是一个分布式、可扩展、实时的搜索和分析引擎&#xff0c;建立在开源搜索库Lucene之上。它提供了强大的全文搜索功能和复杂的分析能力&#xff0c;适用于各种场景&#xff0c;包括应用日志分析、电子商务搜索…...

【JVM 基础】类字节码详解

JVM 基础 - 类字节码详解 多语言编译为字节码在JVM运行Java字节码文件Class文件的结构属性从一个例子开始反编译字节码文件字节码文件信息常量池方法表集合类名 再看两个示例分析try-catch-finallykotlin 函数扩展的实现 源代码通过编译器编译为字节码&#xff0c;再通过类加载…...

【算法】基础算法001之双指针

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.数组分块&#xf…...

[力扣 Hot100]Day2 字母异位词分组

题目描述 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 出处 思路 这题有点考阅读理解&#xff0c;意思就是把输入数组中的所含字母相同但顺序不同的单词放到同…...

Ostrakon-VL扫描终端真实案例:烘焙坊用AI识别原料保质期与库存预警

Ostrakon-VL扫描终端真实案例&#xff1a;烘焙坊用AI识别原料保质期与库存预警 1. 项目背景与痛点 在烘焙行业&#xff0c;原料管理一直是个令人头疼的问题。传统的手工记录方式存在以下典型问题&#xff1a; 保质期难追踪&#xff1a;面粉、奶油等原料包装上的日期标识五花…...

黑丝空姐-造相Z-Turbo场景应用:为你的内容创作提供无限灵感

黑丝空姐-造相Z-Turbo场景应用&#xff1a;为你的内容创作提供无限灵感 1. 镜像概述与核心能力 黑丝空姐-造相Z-Turbo是一款基于Xinference部署的文生图模型服务&#xff0c;通过gradio提供直观的交互界面。该镜像专注于生成特定风格的视觉内容&#xff0c;为创意工作者提供高…...

RWKV7-1.5B-g1a开源模型部署:RWKV-7架构在国产GPU平台适配进展

RWKV7-1.5B-g1a开源模型部署&#xff1a;RWKV-7架构在国产GPU平台适配进展 1. 平台简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构的开源多语言文本生成模型&#xff0c;特别针对国产GPU平台进行了优化适配。这个1.5B参数的轻量级模型非常适合以下场景&#xff1a; 基础问答&…...

Qwen2.5-14B-Instruct深度微调实录:像素剧本圣殿开源剧本创作指南

Qwen2.5-14B-Instruct深度微调实录&#xff1a;像素剧本圣殿开源剧本创作指南 1. 项目概览 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款基于Qwen2.5-14B-Instruct大模型深度微调的专业剧本创作工具。这个开源项目将前沿AI技术与复古像素美学相结合&#…...

LeaguePrank终极指南:免费打造个性化英雄联盟界面体验

LeaguePrank终极指南&#xff1a;免费打造个性化英雄联盟界面体验 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 还在为英雄联盟千篇一律的客户端界面感到乏味吗&#xff1f;LeaguePrank这款免费开源工具让你轻松自定义游戏中…...

【通信】基于matlab MC-CDMA系统仿真【含Matlab源码 15245期】

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到海神之光博客之家&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49…...

palworld-host-save-fix:跨环境存档迁移的技术突破与实践指南

palworld-host-save-fix&#xff1a;跨环境存档迁移的技术突破与实践指南 【免费下载链接】palworld-host-save-fix 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-host-save-fix 一、问题溯源&#xff1a;幻兽帕鲁存档迁移的核心挑战 核心价值&#xff1a;深…...

Serverless时代Java开发者必学的3种函数封装范式:POJO/Function/Consumer,第2种正在被淘汰!

第一章&#xff1a;Serverless时代Java函数计算的演进与定位Serverless 架构正深刻重塑 Java 应用的部署范式。传统 Java 应用依赖长生命周期的 JVM 进程与复杂中间件栈&#xff0c;而函数计算&#xff08;Function-as-a-Service, FaaS&#xff09;将执行单元收敛为无状态、事件…...

C标准库缓冲区溢出问题与安全编程实践

1. C标准库缓冲区溢出问题概述缓冲区溢出是C语言开发中最常见的安全漏洞之一。作为一名有十年经验的嵌入式开发者&#xff0c;我见过太多由于不当使用标准库函数导致的崩溃和安全问题。缓冲区溢出通常发生在程序向固定大小的缓冲区写入超过其容量的数据时&#xff0c;多余的数据…...

STM32F4 Flash读写避坑指南:如何安全存储关键数据(附完整代码)

STM32F4 Flash读写避坑指南&#xff1a;如何安全存储关键数据&#xff08;附完整代码&#xff09; 第一次在STM32F4上操作Flash时&#xff0c;我遇到了一个令人抓狂的问题——设备运行几小时后数据莫名其妙丢失。经过三天三夜的调试才发现&#xff0c;原来是在写入前忘记检查扇…...