vue使用jsencrypt实现rsa前端加密的操作代码

 更新时间:2023年09月06日 14:44:45   作者:范特西是只猫  
这篇文章主要介绍了vue使用jsencrypt实现rsa前端加密,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

实现 RSA 加密

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

1 安装 jsencrypt

npm install jsencrypt

2 编写 jsencrypt.js

  • utils 文件夹中新建 jsencrypt.js 文件,内容如下:
  • 注意点:一般公钥都是后端生成好的,之间给到前端,需要注意的需要让后端把生成的公钥放入.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加密
};

到此这篇关于vue使用jsencrypt实现rsa前端加密的操作代码的文章就介绍到这了,更多相关vue rsa前端加密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue使用Vue.extend方法仿写个loading加载中效果实例

    vue使用Vue.extend方法仿写个loading加载中效果实例

    在vue中提供v-loading命令,用于div的loading加载,下面这篇文章主要给大家介绍了关于vue使用Vue.extend方法仿写个loading加载中效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue.js el-table动态单元格列合并方式

    vue.js el-table动态单元格列合并方式

    这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue源码之批量异步更新策略的深入解析

    vue源码之批量异步更新策略的深入解析

    这篇文章主要给大家介绍了关于vue源码之批量异步更新策略的相关资料,关于vue异步更新是我们日常开发中经常遇到的一个功能,需要的朋友可以参考下
    2021-05-05
  • 如何解决Element UI中NavMenu折叠菜单的坑

    如何解决Element UI中NavMenu折叠菜单的坑

    这篇文章主要介绍了如何解决Element UI中NavMenu折叠菜单的坑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue3中批量全局注册组件实例详解

    vue3中批量全局注册组件实例详解

    在vue中,我们在main.ts引入的全局注册的组件是可以不需要import导入而直接使用的,使用的时候是自己全局注册组件时的名称,而不是组件名,这篇文章主要介绍了vue3中批量全局注册组件,需要的朋友可以参考下
    2023-05-05
  • VUE中computed 、created 、mounted的先后顺序说明

    VUE中computed 、created 、mounted的先后顺序说明

    这篇文章主要介绍了VUE中computed 、created 、mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue组件间的通信方式详析

    Vue组件间的通信方式详析

    本文介绍Vue组件间通信方式,Vue组件间通信一直是个重要的话题,虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题,但是在组件库内部使用Vuex往往会比较重,本文将系统的罗列出几种不使用Vuex,比较实用的组件间的通信方式,希望能帮助到大家
    2022-09-09
  • Vue自定义指令详细

    Vue自定义指令详细

    这篇文章主要介绍了Vue自定义指令,文章从背景开始详细介绍Vue自定义指令的详细内容,随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下
    2021-11-11
  • vue实现鼠标滑动预览视频封面组件示例详解

    vue实现鼠标滑动预览视频封面组件示例详解

    这篇文章主要为大家介绍了vue实现鼠标滑动预览视频封面组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue-router 权限控制的示例代码

    vue-router 权限控制的示例代码

    本篇文章主要介绍了vue-router 权限控制的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论