vue使用jsencrypt实现rsa前端加密

news2024/11/18 3:22:48

实现 RSA 加密

介绍 vue 完成 rsa 加密传输,jsencrypt 实现参数的前端加密

1 安装 jsencrypt

npm install jsencrypt

2 编写 jsencrypt.js

  1. utils 文件夹中新建 jsencrypt.js 文件,内容如下:
  2. 注意点:一般公钥都是后端生成好的,之间给到前端,需要注意的需要让后端把生成的公钥放入.txt文件中。把.txt文件给前端,否则可能会出现无法使用的可能
import JSEncrypt from "jsencrypt/bin/jsencrypt.min";

// 密钥对生成 http://web.chacuo.net/netrsakeypair

// 公钥进行加密(后端给前端的公钥)
// 测试数据
const publicKey =
  "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAoZFKd5QKsXGcYa0SHVsy\n" +
  "Mmtw6ODLpi0KAX3VyYKnlFcUa3T7NSiWEvozm+Pe2KGFP/QOtxo4Psg5RzhGC9Rk\n" +
  "R15ZiaySq7uOEIPmLXFG46tItCPt3r+JS0ycCTX7QGkOX5jN/tLkuEV482anH/qi\n" +
  "bRbh9Vajh9axxxxxxxxxx2K+M7PNN0z4P8944zVN4Z0LoXnPZ9x511VMRzWyAgJU\n" +
  "700j6l1Uwx+Cw0sBY379XW8jkBTqq/wQ1RBOCbLT0jgKql+cPVJ6Exqu6sMIKtKH\n" +
  "sueLOAQh31kosj8QXvhf+21+YOkoKLXxMRyw4WD7HOBXHQZp0q6+Em4ZmpvltPhm\n" +
  "vwIDAQAB";

// 私钥进行解密
const privateKey = "";

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt();
  encryptor.setPublicKey(publicKey); // 设置公钥
  return encryptor.encrypt(txt); // 对数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt();
  encryptor.setPrivateKey(privateKey); // 设置私钥
  return encryptor.decrypt(txt); // 对数据进行解密
}

3. 页面使用

import { encrypt, decrypt } from "@/utils/jsencrypt";

// 请求参数
let params = {
  username: "admin",
  password: encrypt(123456),//对123456进行rsa加密
};

在这里插入图片描述

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

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

相关文章

thinkphp6 入门(4)--数据库操作 增删改查

一、设计数据库表 比如我新建了一个数据库表,名为test 二、配置数据库连接信息 本地测试 直接在.env中修改,不用去config/database.php中修改 正式环境 三、增删改查 引入Db库 use think\facade\Db; 假设新增的控制器路径为 app\test\control…

【深度学习】基于卷积神经网络的铁路信号灯识别方法

基于卷积神经网络的铁路信号灯识别方法 摘 要:1 引言2 卷积神经网络模型2.1 卷积神经网络结构2.2.1 卷积层2.2.2 池化层2.2.3 全连接层 3 卷积神经网络算法实现3.1 数据集制作3.2 卷积神经网络的训练过程3.2.1 前向传播过程 4 实验5 结语 摘 要: 目前中…

ctfhub ssrf(3关)

文章目录 内网访问伪协议读取文件扫描端口 内网访问 根据该题目,是让我们访问127.0.0.1/falg.php,访问给出的链接后用bp抓包,修改URL,发送后得到flag: 伪协议读取文件 这题的让我们用伪协议,而网站的目录…

【算法】树上倍增 LCA

文章目录 相关链接模板题目1483. 树节点的第 K 个祖先最近公共祖先LCA的求法 练习题目2836. 在传球游戏中最大化函数值2846. 边权重均等查询 扩展题目 相关链接 把相关链接放在最前面是因为,周赛遇到了几次,不会做。这才想起来学一下这个算法。 【力扣…

快讯 | ALVA 荣获首届“格物杯”联通物联网应用创新大赛复赛一等奖!

8 月 7 日,“物聚龙江 智联百业”物联网创新发展合作交流暨首届“格物杯”联通物联网应用创新大赛企业赛道复赛 (赛区四)在哈尔滨举办。 ALVA Systems 凭借智能远程协助平台—— ALVA Rainbow 在近 50 家企业中脱颖而出,荣获首届“格物杯”联通物联网应…

Docker的数据管理(持久化存储)

文章目录 一、概述二、数据卷三、数据卷容器四、端口映射五、容器互联(使用centos镜像)总结 一、概述 管理 Docker 容器中数据主要有两种方式:数据卷(Data Volumes)和数据卷容器(DataVolumes Containers&a…

Hadoop的概述与安装

Hadoop的概述与安装 一、Hadoop内部的三个核心组件1、HDFS:分布式文件存储系统2、YARN:分布式资源调度系统3、MapReduce:分布式离线计算框架4、Hadoop Common(了解即可) 二、Hadoop技术诞生的一个生态圈数据采集存储数…

Ext Direct 全解密

Ext Direct 相关的类 Ext Direct旨在通过提供单一接口来简化客户端和服务器之间的通信,从而减少验证数据和处理返回数据包(读取数据、错误条件等)通常需要的公共代码量。 Ext Direct 相关的类基本位于 Ext.direct 包中, 除此之外, 还有Direct类型的数据代码 Ext.data.pr…

linux复习笔记01(小滴课堂)

1.安装CentOs7系统 点击下一步在自定义硬件中: 我们可以删除我们不使用的,后续如果需要再加上即可。 然后我们就可以开启这台虚拟机了。 我们可以进行下载cetos7. 这里选择简体中文就可以。 时间的设置。 可以开启下网络。 在这里选择设置root密码&#…

MybatisPlus 核心功能 条件构造器 自定义SQL Service接口 静态工具

MybatisPlus 快速入门 常见注解 配置_软工菜鸡的博客-CSDN博客 2.核心功能 刚才的案例中都是以id为条件的简单CRUD,一些复杂条件的SQL语句就要用到一些更高级的功能了。 2.1.条件构造器 除了新增以外,修改、删除、查询的SQL语句都需要指定where条件。因此…

Nginx启动时提示nginx: [emerg] still could not bind()

启动Nginx报这个nginx: [emerg] still could not bind()。 问题原因 nginx启动要使用的端口被占用了 解决方法: 1、根据Nginx配置文件查看配置的端口默认的是80端口,然后我们输出指令查看端口占用情况。 输入命令: netstat -ntlp|grep 8…

Milvus以及Web UI 安装

向量数据库懂的都懂 版本数据 [rootiZ7xv7q4im4c48qen2do2bZ project]# cat /etc/redhat-release CentOS Stream release 9 [rootiZ7xv7q4im4c48qen2do2bZ project]# docker version Client: Docker Engine - CommunityVersion: 24.0.5API version: 1.43Go v…

使用Puppeteer进行游戏数据可视化

导语 Puppeteer是一个基于Node.js的库,可以用来控制Chrome或Chromium浏览器,实现网页操作、截图、测试、爬虫等功能。本文将介绍如何使用Puppeteer进行游戏数据的爬取和可视化,以《英雄联盟》为例。 概述 《英雄联盟》是一款由Riot Games开…

Axure RP PC电商平台Web端交互原型模板

Axure RP PC电商平台Web端交互原型模板。原型图内容齐全,包含了用户中心、会员中心、优惠券、积分、互动社区、运营推广、内容推荐、商品展示、订单流程、订单管理、售后及服务等完整的电商体系功能架构和业务流程。 在设计尺寸方面,本套模板按照主流的…

Qt中布局管理使用总结

目录 1. 五大布局 1.1 QVBoxLayout垂直布局 1.2 QHBoxLayout水平布局 1.3 QGridLayout网格布局 1.4 QFormLayout表单布局 1.5 QStackedLayout分组布局 1.6 五大布局综合应用 2. 分割窗口 3. 滚动区域 4. 停靠区域 1. 五大布局 1.1 QVBoxLayout垂直布局 #include <…

关于el-input和el-select宽度不一致问题解决

1. 情景一 单列布局 对于上图这种情况&#xff0c;只需要给el-select加上style"width: 100%"即可&#xff0c;如下&#xff1a; <el-select v-model"fjForm.region" placeholder"请选择阀门类型" style"width: 100%"><el-o…

Ubuntu 20.04 网卡命名规则

Ubuntu 系统中网卡的命名规则是&#xff1a;Consistent Network Device Naming&#xff08;一致网络设备命名&#xff09;规范。这个规范的原理是根据固件、拓扑和位置信息分配固定名称。其中&#xff0c;设备类型 en 代表 Ethernet (以太网)&#xff0c;wl 代表 WLAN&#xff…

FPGA实现电机转速PID控制

通过纯RTL实现电机转速PID控制&#xff0c;包括电机编码器值读取&#xff0c;电机速度、正反转控制&#xff0c;PID算法&#xff0c;卡尔曼滤波&#xff0c;最终实现对电机速度进行控制&#xff0c;使其能够渐近设定的编码器目标值。 一、设计思路 前面通过SOPC之NIOS Ⅱ实现电…

Python 快速输出接下来几个月的月末日期

# pip install arrow 安装库&#xff08;若已安装 可忽略&#xff09; import arrowEnd_of_month_date [] # 月末日期 for i in range(100):if arrow.now().shift(daysi).format(YYYY-MM-DD)[-2:] 01: # 若日期为 1 号 则返回前一天的日期End_of_month_date.append(arrow.now…

C# winform控件和对象双向数据绑定

实现目的&#xff1a; 控件和对象双向数据绑定 实现结果&#xff1a; 1. 对象值 -> 控件值 2. 控件值 -> 对象值 using System; using System.Windows.Forms;namespace ControlDataBind {public partial class MainForm : Form{People people new People();public Mai…