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加密及挂载方法，希望对大家有所帮助！

赞 (0)

相关推荐

  • Js参数RSA加密传输之jsencrypt.js的使用

    注意几点: 1.参数传递的+号处理,在传输时会把+变成空格,不处理后端就报错了. 1.前端代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Login</title> <script src="~/Scripts/jquery-1.10.2.m

  • jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】

    本文实例讲述了jQuery+C#实现参数RSA加密传输功能.分享给大家供大家参考,具体如下: 注意: 参数传递的+号处理,在传输时会把+变成空格,不处理后端就报错了. 1.前端代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Login</title> <

  • 同时兼容JS和C#的RSA加密解密算法详解（对web提交的数据加密传输）

    同时兼容JS和C#的RSA加密解密算法详解（对web提交的数据加密传输）

    前言 我们在Web应用中往往涉及到敏感的数据,由于HTTP协议以明文的形式与服务器进行交互,因此可以通过截获请求的数据包进行分析来盗取有用的信息.虽然https可以对传输的数据进行加密,但是必须要申请证书(一般都是收费的),成本较高.那么问题来了,如果对web提交的敏感数据进行加密呢?web应用中,前端的数据处理和交互基本上都是靠javascript来完成,后台的逻辑处理可以C#(java)等进行处理. 微软的C#中虽然有RSA算法,但是格式和OpenSSL生成的公钥/私钥文件格式并不兼容.这个

  • 原生js的RSA和AES加密解密算法

    本文实例为大家分享了js中RSA和AES加密解密详细代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset='UTF-8'> </head> <body> <div class='test'></div> <script type="text/javascript"> function encrypt(data, k

  • PHP+JS+rsa数据加密传输实现代码

    JS端代码: 复制代码 代码如下: //文件base64.js: var b64map="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; var b64pad="="; function hex2b64(h) { var i; var c; var ret = ""; for(i = 0; i+3 <= h.length; i+=3) { c = pars

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

  • 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.pro

  • Java RSA加密解密实现方法分析【附BASE64 jar包下载】

    本文实例讲述了Java RSA加密解密实现方法.分享给大家供大家参考,具体如下: 该工具类中用到了BASE64,需要借助第三方类库:javabase64-1.3.1.jar javabase64-1.3.1.jar 本站下载地址. 注意: RSA加密明文最大长度117字节,解密要求密文最大长度为128字节,所以在加密和解密的过程中需要分块进行. RSA加密对明文的长度是有限制的,如果加密数据过大会抛出如下异常: Exception in thread "main" javax.cryp

  • Android 客户端RSA加密的实现方法

    Android 客户端RSA加密的实现方法 针对java后端进行的RSA加密,android客户端进行解密,结果是部分乱码的问题: 注意两点,编码问题和客户端使用的算法问题 即:都使用UTF-8编码,Base64使用一致,另外,使用下面的代码在后端和移动端解密只有一点不同: 移动端使用 Cipher cipher = Cipher.getInstance("RSA/ECB/PKCS1Padding"); 后端使用 Cipher cipher = Cipher.getInstance(&

  • Spring Cloud Config RSA简介及使用RSA加密配置文件的方法

    Spring Cloud 为开发人员提供了一系列的工具来快速构建分布式系统的通用模型 .例如:配置管理.服务发现.断路由.智能路由.微代理.控制总线.一次性Token.全局锁.决策竞选.分布式session.集群状态等等.分布式系统的协助需要一大堆的模型,使用Spring Cloud开发者能快速的建立支持实现这些模式的服务和应用程序.他们将适用于任何分布式环境,无论是开发者的个人电脑还是生产环境,还是云平台. 特性 Spring Cloud 专注于提供良好开箱即用的典型方案和可扩展方式. 分布式

  • Vue项目如何实现rsa加密

    Vue项目如何实现rsa加密

    目录 如何实现rsa加密 安装jsencrypt 引入jsencrypt 获取公钥(调接口) 引入getPubKey 使用rsa加密,解密,加签,解签 安装 引js 如何实现rsa加密 引言 客户端初始化访问登录服务时,需要以账号和密码作为参数请求后台接口,此时后台响应会展示出详细的账号和密码,为了提高安全性,一般需要对响应中的密码进行加密处理.在这里主要是总结了rsa加密方法. 安装jsencrypt npm i jsencrypt 引入jsencrypt 在 main.js 文件中引入 js

  • .NET使用RSA加密解密的方法

    .NET使用RSA加密解密的方法

    本文实例为大家分享了.NET使用RSA加密解密的具体代码,供大家参考,具体内容如下 PassWordHelper.cs代码: using System; using System.IO; using System.Text; using System.Globalization; using System.Collections.Generic; using System.Security.Cryptography; namespace Utils { /// <summary> /// 密码

  • PHP rsa加密解密使用方法

    php服务端与客户端交互.提供开放api时,通常需要对敏感的部分api数据传输进行数据加密,这时候rsa非对称加密就能派上用处了,下面通过一个例子来说明如何用php来实现数据的加密解密 1.加密解密的第一步是生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可以) 下载开源RSA密钥生成工具openssl(通常Linux系统都自带该程序),解压缩至独立的文件夹,进入其中的bin目录,执行以下命令: openssl genrsa -out rsa_private_key.pem 1024 o

  • Java实现的RSA加密解密算法示例

    本文实例讲述了Java实现的RSA加密解密算法.分享给大家供大家参考,具体如下: import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.Image; import java.awt.RenderingHints; import java.awt.image.BufferedImage; import java.

  • PHP的RSA加密解密方法以及开发接口使用

    网络安全问题很重要,尤其是保证数据安全,遇到很多在写接口的程序员直接都是明文数据传输,在我看来这是很不专业的.本人提倡经过接口的数据都要进行加密解密之后进行使用. 这篇文章主要介绍使用PHP开发接口,数据实现RSA加密解密后使用,实例分析了PHP自定义RSA类实现加密与解密的技巧,非常具有实用价值,需要的朋友可以参考下. 简单介绍RSA RSA加密算法是最常用的非对称加密算法,CFCA在证书服务中离不了它.但是有不少新手对它不太了解.下面仅作简要介绍.RSA是第一个比较完善的公开密钥算法,它既能

  • Vue中使用jsencrypt进行RSA非对称加密的操作方法

    Vue中使用jsencrypt进行RSA非对称加密的操作方法

    在线生成生成RSA密钥对:http://web.chacuo.net/netrsakeypair 下载jsencrypt cnpm i -S jsencrypt 引入 import { JSEncrypt } from "jsencrypt"; 基本使用 注意:要加密的数据必须是字符串!! 提示:给公钥直接用双引号“”引起来后可能要手动删掉每行末尾多余的空格,有点麻烦,此时可以直接用``来引.只是这样可能排版显示不太好看 testRSA() { let publicKey = &quo

随机推荐