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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
不要用强制方法杀掉python线程
2017/02/26 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
师范学院毕业生求职信范文
2013/12/26 职场文书
公司董事长岗位职责
2014/06/08 职场文书
盗窃案辩护词
2015/05/21 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
导游词之杭州西湖
2019/09/19 职场文书