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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
joomla组件开发入门教程
2016/05/04 PHP
网页常用特效代码整理
2006/06/23 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python集合删除多种方法详解
2020/02/10 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
考试作弊检讨书
2014/10/21 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
2015年导购员工作总结
2015/04/25 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
建党伟业的观后感
2015/06/01 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
处理canvas绘制图片模糊问题
2022/05/11 Javascript