Vue使用JSEncrypt实现rsa加密及挂载方法


Posted in Javascript onFebruary 07, 2020

挂载全局方法

使用jsencrypt进行rsa加密

原文链接:Js参数RSA加密传输,jsencrypt.js的使用 *
https://3water.com/article/179813.htm
(原文处有一个地方不对,不需要转换+,rsa已经做过base64转码了)

1.安装依赖 npm install jsencrypt 
2.在main.js引入 import { JSEncrypt } from 'jsencrypt' 
3.挂载全局方法
//JSEncrypt加密方法
Vue.prototype.$encryptedData = function(publicKey, data) {
 //new一个对象
 let encrypt = new JSEncrypt()
 //设置公钥
 encrypt.setPublicKey(publicKey)
 //password是要加密的数据,此处不用注意+号,因为rsa自己本身已经base64转码了,不存在+,全部是二进制数据
 let result = encrypt.encrypt(password)
 return result
}
//JSEncrypt解密方法
Vue.prototype.$decryptData = function(privateKey, data) {
 // 新建JSEncrypt对象
 let decrypt = new JSEncrypt()
 // 设置私钥
 decrypt.setPrivateKey(privateKey)
 // 解密数据
 let result = decrypt.decrypt(secretWord)
 return result
}

全局混合

使用yarn安装至Vue项目

yarn add jsencrypt --dep

或者使用npm

npm install jsencrypt --dep

混入

import { JSEncrypt } from 'jsencrypt'
export const RsaMixin = {
 methods: {
  // 加密
  encryptedData(publicKey, data) {
   // 新建JSEncrypt对象
   let encryptor = new JSEncrypt();
   // 设置公钥
   encryptor.setPublicKey(publicKey);
   // 加密数据
   return encryptor.encrypt(data);
  },
  // 解密
  decryptData(privateKey,data){
   // 新建JSEncrypt对象
   let decrypt= new JSEncrypt();
   // 设置私钥
   decrypt.setPrivateKey(privateKey);
   // 解密数据
   decrypt.decrypt(secretWord);
  }
 }
}

引入

<script>
 import InvoiceRecordModal from './modules/InvoiceRecordModal'
 import { RsaMixin } from '@/mixins/RsaMixin'

 export default {
 name: "InvoiceRecordList",
 //此时可以直接调用混入的方法
 mixins:[RsaMixin],
 data(){},
 computed:{}
 }
</script>

封装为单VUE文件中的方法

使用yarn安装至Vue项目

yarn add jsencrypt --dep

或者使用npm

npm install jsencrypt --dep

引入jsencrypt

import { JSEncrypt } from 'jsencrypt'

方法

methods: {
 // 加密
 encryptedData(publicKey, data) {
  // 新建JSEncrypt对象
  let encryptor = new JSEncrypt();
  // 设置公钥
  encryptor.setPublicKey(publicKey);
  // 加密数据
  return encryptor.encrypt(data);
 },
 // 解密
 decryptData(privateKey,data){
  // 新建JSEncrypt对象
  let decrypt= new JSEncrypt();
  // 设置私钥
  decrypt.setPrivateKey(privateKey);
  // 解密数据
  decrypt.decrypt(secretWord);
 }
 }

总结

以上所述是小编给大家介绍的Vue使用JSEncrypt实现rsa加密及挂载方法,希望对大家有所帮助!

Javascript 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
jQuery实现获取多选框的值示例
Feb 07 #jQuery
微信小程序canvas开发水果老虎机的思路详解
Feb 07 #Javascript
Node.js 在本地生成日志文件的方法
Feb 07 #Javascript
node.js 微信开发之定时获取access_token
Feb 07 #Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 #Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 #Javascript
You might like
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
网站编辑求职信
2013/10/17 职场文书
自荐书格式
2013/12/01 职场文书
承认错误的检讨书
2014/01/30 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
卫生主题班会
2015/08/14 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Python制作动态字符画的源码
2021/08/04 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Python Matplotlib绘制动画的代码详解
2022/05/30 Python