前端开发之jsencrypt加密解密的使用方法和使用示例

前言效果图一、vue中简单案例1、安装组件2、创建加密解密的方法文件3、文件内容

前言

jsencrypt官方文档 公钥私钥生成网址 jsencrypt就是一个基于rsa加解密的js库,常用在向后台发送数据的时候

本文是通过node.js的window.btoa和window.atob配合jsencrypt进行加密

效果图

一、vue中简单案例

1、安装组件

npm install jsencrypt --dev

2、创建加密解密的方法文件

3、文件内容

import JSEncrypt from 'jsencrypt'

//去密钥生成网址去生成公钥和密钥 http://tools.jb51.net/password/rsa_encode

const publicKey = '生成的公钥'

const privateKey ='生成的密钥'

/**

* 最长加密长度

*/

const MAX_ENCRYPT_BLOCK = 117

/**

* 最长解码长度

*/

const MAX_DECRYPT_BLOCK = 128

/**

* @description RSA加密(支持长字符加密)

*/

export async function encryptedData (data:any) {

//创建实例

const encrypt = new JSEncrypt()

// 设置公钥

encrypt.setPublicKey(

`-----BEGIN PUBLIC KEY-----${publicKey}-----END PUBLIC KEY-----`

)

let bufTmp = ''

let hexTmp:any = ''

let result = ''

const buffer = JSON.stringify(data)

let offSet = 0

const inputLen = buffer.length

while (inputLen - offSet > 0) {

if (inputLen - offSet > MAX_ENCRYPT_BLOCK) {

bufTmp = buffer.slice(offSet, offSet + MAX_ENCRYPT_BLOCK)

} else {

bufTmp = buffer.slice(offSet, inputLen)

}

//对数据进行加密

hexTmp = encrypt.encrypt(bufTmp.toString())

result += hexTmp

offSet += MAX_ENCRYPT_BLOCK

}

//js可以使用Buffer.from() ts中使用Buffer.from(),运行后控制台会报错Buffer undefined所以使用替代方案node方法btoa再次加密

return btoa(result)

}

/**

* @description RSA解密(支持长字符解密)

* @param data

* @returns {PromiseLike}

*/

export function decryptedData (data) {

const decrypt = new JSEncrypt()

//设置私钥

decrypt.setPrivateKey(

`-----BEGIN RSA PRIVATE KEY-----${privateKey}-----END RSA PRIVATE KEY-----`

)

let bufTmp = ''

let hexTmp:any = ''

let result = ''

//通过使用atob解码数据 如果使用的Buffer.from()使用Buffer.from()解码数据

const buffer = atob(data)

let offSet = 0

const inputLen = buffer.length

while (inputLen - offSet > 0) {

if (inputLen - offSet > MAX_DECRYPT_BLOCK) {

bufTmp = buffer.slice(offSet, offSet + MAX_DECRYPT_BLOCK)

} else {

bufTmp = buffer.slice(offSet, inputLen)

}

//对数据解码

hexTmp = decrypt.decrypt(bufTmp)

result += hexTmp

offSet += MAX_DECRYPT_BLOCK

}

return JSON.parse(result)

}

推荐链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: