今天尝试在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)
运行项目打开开发者工具可以看到结果:
简单记录