vue使用jsencrypt实现rsa前端加密

实现 RSA 加密

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

1 安装 jsencrypt

shell 复制代码
npm install jsencrypt

2 编写 jsencrypt.js

  1. utils 文件夹中新建 jsencrypt.js 文件,内容如下:
  2. 注意点:一般公钥都是后端生成好的,之间给到前端,需要注意的需要让后端把生成的公钥放入.txt文件中。把.txt文件给前端,否则可能会出现无法使用的可能
js 复制代码
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. 页面使用

js 复制代码
import { encrypt, decrypt } from "@/utils/jsencrypt";

// 请求参数
let params = {
  username: "admin",
  password: encrypt(123456),//对123456进行rsa加密
};
相关推荐
css趣多多30 分钟前
this.$watch
前端·javascript·vue.js
有来技术1 小时前
ASP.NET Core 权限管理系统(RBAC)设计与实现|vue3-element-admin .NET 后端
vue.js·后端·c#·asp.net·.net
qq_12498707531 小时前
基于springboot的林业资源管理系统设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
qq_12498707532 小时前
基于springboot的竞赛团队组建与管理系统的设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·信息可视化·毕业设计·计算机毕业设计
可问春风_ren2 小时前
Vue3 入门详解:从基础到实战
开发语言·前端·javascript·vue.js·前端框架·ecmascript·edge浏览器
想睡好2 小时前
ref和reactive
前端·javascript·vue.js
毕设十刻3 小时前
基于Vue的餐厅收银系统s6150(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
xkxnq3 小时前
第四阶段:Vue 进阶与生态整合(第 58 天)(Vue 项目部署:打包、上线与服务器配置)
服务器·前端·vue.js
Code小翊4 小时前
Vue 3 核心语法速查
前端·javascript·vue.js
利刃大大6 小时前
【Vue】自定义指令directives && 指令钩子 && IntersectionObserver
前端·javascript·vue.js