前端开发之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<ArrayBuffer>} */ 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) }
复制