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 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
javascript表格的渲染组件
Jul 03 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
微信小程序实现文字跑马灯效果
May 26 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
给php新手谈谈我的学习心得
2007/02/25 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
快速入门Vue
2016/12/19 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue2单元测试环境搭建
2018/05/24 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
如何基于python实现脚本加密
2019/12/28 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
进修护士自我鉴定
2013/10/14 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
JavaScript函数柯里化
2021/11/07 Javascript