vue项目中使用RSA加解密

今天尝试在vue中使用RSA加密数据,碰见了几个小问题,记录一下.

首先是npm下载jsencrypt , encryptlong 下载encryptlong的原因下边会提

/* 引入jsencrypt实现数据RSA加密 */
import JSEncrypt from "jsencrypt" // 处理长文本数据时报错  jsencrypt.js Message too long for RSA
/* 引入encryptlong实现数据RSA加密 */
import encrypt from "encryptlong" // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。

 

export default {
	/* JSEncrypt加密 */
  rsaPublicData (data) {
    const publicKey = '公钥key'
    let jsencrypt = new JSEncrypt()
    jsencrypt.setPublicKey(publicKey)
    let result = jsencrypt.encrypt(JSON.stringify(data))
    return result
  },
	/* JSEncrypt解密 */
	rsaPrivateData (data) {
	  const privateKey = '私钥key'
	  let jsencrypt = new JSEncrypt()
	  jsencrypt.setPrivateKey(privateKey)
	  let result = jsencrypt.encrypt(JSON.stringify(data))
	  return result
	},
	encrypt (data) {
    const PUBLIC_KEY = '公钥key'
    let encryptor = new encrypt()
    encryptor.setPublicKey(PUBLIC_KEY)
		/* 加密前必须把数据转化成字符串否则解不出来,找了好久才发现/(ㄒoㄒ)/~~ */
    const result = encryptor.encryptLong(JSON.stringify(data))
    return result
  },
  // 解密 - PRIVATE_KEY - 验证
  // @param data String
  decrypt(data) {
    const PRIVATE_KEY = '私钥key'
    let encryptor = new encrypt()
    encryptor.setPrivateKey(PRIVATE_KEY)
		let result = encryptor.decryptLong(JSON.stringify(data));
		return result
  }
}

然后再main.js页面引入

import Rsa from "@/utils/rsa.js"
Vue.prototype.Rsa = Rsa // 将Rsa注册为公共方法,方便其他页面调用

以上步骤结束后,就可以在需要的地方通过 this.Rsa.方法名 引入并使用了.

比如数据为:

data() {
	return {
		rsaData: {
			id: '001',
			name: 'tom',
			sex: '男',
			age: '18'
		}
	}
},

使用方法:

console.log('加密前:' + JSON.stringify(this.rsaData))
let data = this.Rsa.encrypt(this.rsaData)
console.log('加密后:' + data)
let jsn = this.Rsa.decrypt(data)
console.log('解密后:' + jsn)

运行项目打开开发者工具可以看到结果:

简单记录