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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php输出图像的方法实例分析
2017/02/16 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python之py2exe打包工具详解
2017/06/14 Python
python实现kMeans算法
2017/12/21 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
thinkphp5 路由分发原理
2021/03/18 PHP
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
前台接待岗位职责
2015/02/03 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技