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第一天(Jquery学习笔记)
May 11 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
vue-router的hooks用法详解
Jun 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
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python 编码规范整理
2018/05/05 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
对Python 语音识别框架详解
2018/12/24 Python
Python检测数据类型的方法总结
2019/05/20 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python创建数字列表的示例
2019/11/28 Python
Python读取YAML文件过程详解
2019/12/30 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
python如何导入依赖包
2020/07/13 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英文简历自荐信范文
2013/12/11 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
小学生常见病防治方案
2014/06/06 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
信用卡收入证明范本
2015/06/12 职场文书