前端插件库-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>

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

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

相关文章

LeetCode 2696.删除子串后的字符串最小长度:栈

【LetMeFly】2696.删除子串后的字符串最小长度&#xff1a;栈 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-string-length-after-removing-substrings/ 给你一个仅由 大写 英文字符组成的字符串 s 。 你可以对此字符串执行一些操作&#xff0c;在每一步操…

export default 和exprot

1.默认导入和默认导出 语法: export default {需要输出的内容} 接收: import 成员变量的名字 from 文件夹的路径 案例&#xff1a; a.mjs文件夹下默认导出 export default{a:10,b:20,show(){console.log(123);} } 在b.mjs文件中用成员变量进行接收 import AA from &q…

vue上传文件时显示上传进度

要在Vue中显示文件上传进度&#xff0c;可以使用axios库来处理文件上传&#xff0c;并使用axios的onUploadProgress方法获取上传进度。 首先&#xff0c;确保你已经安装了axios库。可以使用npm或yarn安装&#xff0c;在终端中运行以下命令&#xff1a; npm install axios或者…

Vue 自定义仿word表单录入之单选按钮组件

因项目需要&#xff0c;要实现仿word方式录入数据&#xff0c;要实现鼠标经过时才显示编辑组件&#xff0c;预览及离开后则显示具体的文字。 鼠标经过时显示 正常显示及离开时显示 组件代码 <template ><div class"pager-input flex border-box full-width fl…

【Java】多pdf文件合并为一个.docx文件

当将多个 PDF 文件合并成单个 DOCX 文档时&#xff0c;利用 Java 中的 Apache PDFBox 和 Apache POI 库可以实现这一目标。这个过程可以分为几个步骤&#xff1a; 1. 导入所需的库 使用 Apache PDFBox 和 Apache POI 库来处理 PDF 和 DOCX 文件。你需要导入相关库&#xff0c…

Python快速排序

快速排序是一种常用的排序算法&#xff0c;它通过递归地将数组分割成较小的子数组&#xff0c;然后对这些子数组进行排序&#xff0c;最终将它们合并成一个有序的数组。具体步骤如下&#xff1a; 1. 选择一个基准元素&#xff0c;通常是数组中的第一个元素。 2. 将数组分成两部…

Arthas CPU 火焰图技术 简谈

1.基础命令 help 作用 查看命令帮助信息&#xff0c;可以查看当前 arthas 版本支持的指令&#xff0c;或者查看具体指令的使用说明。cat 作用 打印文件内容&#xff0c;和linux里的cat命令类似&#xff0c;如果没有写路径&#xff0c;则展示当前目录下的文件 使用参考 cat /t…

Linux离线安装MySQL(rpm)

目录 下载安装包安装MySQL检测安装结果服务启停MySQL用户设置 下载安装包 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 下载全量包如&#xff1a;(mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar) 解压&#xff1a;tar -xzvf mysql-8.1.0-1.el7.x86_64.…

web前端案例之抽奖

使用HTMLJavascript完成抽奖案例 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}</style></head><body><div id"container" onclic…

js中的Date对象常用方法总结

近期业务上涉及到很多与时间有关系的地方&#xff0c;写个总结。 这里写目录标题 日期的定义时间戳时间戳和一般时间的相互转换从日期中获取值日期之间的计算 日期的定义 首先&#xff0c;用js定义时间的方法&#xff0c;一共有四种&#xff1a; console.log(new Date()) //…

xinput1_4.dll缺失了怎么办?快速修复xinput1_4.dll文件的方法指南

在快速发展的数字时代&#xff0c;电子设备尤其是电脑成为了我们生活工作中必不可少的工具。然而&#xff0c;在使用过程中&#xff0c;我们可能会遇到各式各样的技术问题&#xff0c;其中一个常见问题是系统提示缺少 xinput1_4.dll文件。这个错误通常会在你尝试运行一个游戏或…

爬虫网易易盾滑块及轨迹算法案例:某乎

声明&#xff1a; 该文章为学习使用&#xff0c;严禁用于商业用途和非法用途&#xff0c;违者后果自负&#xff0c;由此产生的一切后果均与作者无关 一、滑块初步分析 js运行 atob(‘aHR0cHM6Ly93d3cuemhpaHUuY29tL3NpZ25pbg’) 拿到网址&#xff0c;浏览器打开网站&#xff0…

使用 STM32 和 DS18B20 温度传感器设计室内温度监测与报警系统

为设计室内温度监测与报警系统&#xff0c;我们将利用STM32微控制器和DS18B20数字温度传感器&#xff0c;以及蜂鸣器实现温度报警功能。在本文中&#xff0c;将介绍如何通过STM32微控制器读取DS18B20传感器的温度数据&#xff0c;并在超出设定范围时触发蜂鸣器报警。 1. 系统概…

档案统一管理的具体做法包括哪些?

档案统一管理工作&#xff0c;需要根据统管单位工作特点重建管理流程&#xff0c;优化和规范管理。档案统一管理的具体做法包括&#xff1a; 1. 设立档案管理部门或档案管理团队&#xff0c;负责统一管理机构的所有档案资料。 2. 建立档案管理制度和流程&#xff0c;明确档案的…

谈谈 UTF-8 标准和解码的实现

字符集编码的历史 ASCII码 ASCII 码诞生于上世纪 60 年代的美国&#xff0c;它将英文字符和二进制位之间的关系做了统一规定&#xff1a;将 128 个英文的字符映射到一个字节的后 7 位&#xff0c;最前面的一位统一规定为 0。因此 ASCII 码正好使用一个字节存储一个字符&#…

Vue-13、Vue深度监视

1、监视多级结构中某个属性的变化 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>watch深度监视</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm…

ROS2——开发第一个节点

ROS2 的包必须在 src 文件夹下&#xff0c;使用下面的命令创建一个包&#xff0c;并设置相关的依赖 ros2 pkg create my_package --dependencies rclcpp std_msgs可以打开包内的 package.xml &#xff0c;查看 depend 有哪些依赖 #include "rclcpp/rclcpp.hpp" int …

一文解决新手所有python环境变量报错问题

问题描述: cmd控制台输入python或pip后会出现下面情况 首先确保安装程序时勾选了安装pip pip的所在目录&#xff0c;可以打开该目录查看是否存在 如果还有问题&#xff0c;确保环境变量配置了python的路径 具体操作步骤 此处的用户环境变量是只针对当前系统用户有效&a…

大气精美网站APP官网HTML源码

源码介绍 大气精美网站APP官网源码&#xff0c;好看实用&#xff0c;记事本修改里面的内容即可&#xff0c;喜欢的朋友可以拿去研究 下载地址 蓝奏云&#xff1a;https://wfr.lanzout.com/itqxN1ko2ovi CSDN免积分下载&#xff1a;https://download.csdn.net/download/huayu…

推荐个超级好用的Vue库,你可能不知道!

高性能 & 简约的 Vue3 Hooks 库 传送门 这是一个等同于阿里出品的 ahooks 的vue3 Hooks函数工具库。 一个高性能且极致简约的 Vue3 Hooks 库&#xff0c;拥有以下丰富特性&#xff1a; &#x1f3c4;&#x1f3fc;‍♂️ 易学易用 &#x1f50b; 支持 SSR &#x1f6f…