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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
vue 搭建后台系统模块化开发详解
May 01 Javascript
vue全局使用axios的操作
Sep 08 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 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
杏林同学录(五)
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
再谈JavaScript线程
2015/07/10 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers