Vue使用JSEncrypt实现rsa加密及挂载方法

 更新时间:2020年02月07日 14:02:50   作者:未月廿三  
这篇文章主要介绍了Vue使用JSEncrypt实现rsa加密及挂载方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

挂载全局方法

使用jsencrypt进行rsa加密

原文链接:Js参数RSA加密传输,jsencrypt.js的使用 *
https://www.jb51.net/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加密及挂载方法,希望对大家有所帮助!

相关文章

  • vue3.0翻牌数字组件使用方法详解

    vue3.0翻牌数字组件使用方法详解

    这篇文章主要为大家详细介绍了vue3.0翻牌数字组件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue CLI 3.x 自动部署项目至服务器的方法

    Vue CLI 3.x 自动部署项目至服务器的方法

    本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx。非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • vue extend+promise封装全局弹窗组件

    vue extend+promise封装全局弹窗组件

    这篇文章主要为大家详细介绍了vue extend+promise封装全局弹窗组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue组件如何自动按需引入详析

    Vue组件如何自动按需引入详析

    刚学vue时候对于全局组件和局部组件有点懵,不知道什么时候用全局,什么时候用局部,下面这篇文章主要给大家介绍了关于Vue组件如何自动按需引入的相关资料,需要的朋友可以参考下
    2021-12-12
  • vue实现登录时的图片验证码

    vue实现登录时的图片验证码

    这篇文章主要为大家详细介绍了vue实现登录时的图片验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • vue LogicFlow自定义边实现示例详解

    vue LogicFlow自定义边实现示例详解

    这篇文章主要为大家介绍了vue LogicFlow自定义边示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Vue单文件组件基础模板小结

    Vue单文件组件基础模板小结

    本篇文章主要介绍了Vue单文件组件基础模板小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • elementUI中input回车触发页面刷新问题与解决方法

    elementUI中input回车触发页面刷新问题与解决方法

    这篇文章主要给大家介绍了关于elementUI中input回车触发页面刷新问题与解决方法,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vue之监听数据的原理详解

    Vue之监听数据的原理详解

    这篇文章主要为大家介绍了Vue之监听数据的原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
    2021-11-11
  • Vue实现动态响应数据变化

    Vue实现动态响应数据变化

    本篇文章主要介绍了Vue 动态响应数据变化,通过绑定数据即可以实时改变视图显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04

最新评论