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中实现v-for循环遍历图片的方法

    Vue中实现v-for循环遍历图片的方法

    这篇文章主要介绍了Vue中实现v-for循环遍历图片的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 表单输入框不支持focus及blur事件的解决方案

    vue 表单输入框不支持focus及blur事件的解决方案

    这篇文章主要介绍了vue 表单输入框不支持focus及blur事件的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue自定义指令详解

    Vue自定义指令详解

    这篇文章主要为大家详细介绍了Vue自定义指令的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue圆形进度条环形进度条组件内部显示图片示例

    vue圆形进度条环形进度条组件内部显示图片示例

    这篇文章主要为大家介绍了vue圆形进度条环形进度条组件内部显示图片示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue路由跳转后刷新指定页面的方法

    vue路由跳转后刷新指定页面的方法

    这篇文章主要介绍了vue路由跳转后刷新指定页面的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 详解Vue如何支持JSX语法

    详解Vue如何支持JSX语法

    这篇文章主要介绍了详解Vue如何支持JSX语法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue 项目地址去掉 #的方法

    vue 项目地址去掉 #的方法

    vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下
    2018-10-10
  • vue实战中的一些实用小魔法汇总

    vue实战中的一些实用小魔法汇总

    这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
    2021-06-06
  • vue3中watch与watchEffect的区别

    vue3中watch与watchEffect的区别

    vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函数中使用,本文重点介绍vue3中watch与watchEffect的区别,感兴趣的朋友一起看看吧
    2023-02-02
  • vue使用节流函数的踩坑实例指南

    vue使用节流函数的踩坑实例指南

    防抖和节流的目的都是为了减少不必要的计算,下面这篇文章主要给大家介绍了关于vue使用节流函数踩坑的相关资料,需要的朋友可以参考下
    2021-05-05

最新评论