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 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
gojs实现蚂蚁线动画效果
Feb 18 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
javascript常用方法汇总
2014/12/02 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
在python中实现对list求和及求积
2018/11/14 Python
python global关键字的用法详解
2019/09/05 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
电子商务个人职业生涯规划范文
2014/02/12 职场文书
《胡杨》教学反思
2014/02/16 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2014年绿化工作总结
2014/12/09 职场文书
高中教师个人工作总结
2015/02/10 职场文书
师范生见习自我总结
2015/06/23 职场文书
小学运动会宣传稿
2015/07/23 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js