vue 数据可视化大屏 项目开发中，为了数据安全，需要对数据进行加解密，后端返回加密数据，前端进行解密然后做后续处理。

安装依赖

因为数据是长数据，所以这里直接使用的是encryptlong

pnpm i encryptlong

引用

import JSEncrypt from 'encryptlong'

配置公私钥

可以前端生成，也可以后端提供，前后端统一即可。
这里是前端生成的。

// 公钥key
const publicKey = '-----BEGIN RSA PRIVATE KEY-----\n' +
  'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDAux55DVJZtR3gTedDJb0PD2xa\n' +
  'GRL4KmOYxn83z436r+M8+EJ3rHO5RdtwsmjxAVhOwEmWPSOfRNPZOqDqFprvHmOo\n' +
  '3iCbCTPPL41grl7RtvgkdyJPVQ35u8xeNKirg2ksxh8uu/wr44dwch2EmNI6GIGk\n' +
  'p3gWaw4StfQlsHIURQIDAQAB\n' +
  '-----END RSA PRIVATE KEY-----'

// 私钥key
const privateKey = '-----BEGIN RSA PRIVATE KEY-----\n' +
  'MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAMC7HnkNUlm1HeBN\n' +
  '50MlvQ8PbFoZEvgqY5jGfzfPjfqv4zz4Qnesc7lF23CyaPEBWE7ASZY9I59E09k6\n' +
  'oOoWmu8eY6jeIJsJM88vjWCuXtG2+CR3Ik9VDfm7zF40qKuDaSzGHy67/Cvjh3By\n' +
  'HYSY0joYgaSneBZrDhK19CWwchRFAgMBAAECgYBDpyt6OKfon4AeRZphYrTrvXE+\n' +
  'a0DSZibR8ROlJrFjByzQMSE72whAR/pQo//cYal681qhZ1LCzKlEvqTPpyG5I7kE\n' +
  'WKDvfVRvtJq8kb5Jf4FoMiY+7DZf7O5akCBK+sRQU4gzx/rp7bWDjc+GdBcDHg3Q\n' +
  'Xsn+GC3UYa+7aLUsXQJBAPKEyjvhygmozyCnh+s4TUQJB+iO9SXoS5K8F1v671LH\n' +
  'KHcfxkDPtwLzYXgK8H+S8pfr2jYDlgiAPDMz7FHYHl8CQQDLcdB4xKP+WmSFfsyj\n' +
  'eHj3l5fQ1ogD7w0lT3Hq6G8pQ0tLwOjiolvgdk91yCbCT1iJ3dy7Hlas3idZm/1+\n' +
  '9IfbAkBaXLYJt+iSzs5WaXXQZAsOFZtXwKSBOlumUeUWRZqUqlZehH1XOs4DEHI5\n' +
  'y0GvFy7DAoMs6wslIbrMjUU5faBbAkEAtrrTdKWqZprqDr2FMI7UmA4g3gLSyDW+\n' +
  'qPRibYu3zGgVCUWL54PM4h9h33iW15BNBgewaqElWL9wuJvTZGReYQJAOXWP2iV3\n' +
  'v69MkYge/bUwnk3v2EsN1yv0IbFwpW8mVipwEpKCMn9k1lBvgJlcGSU3nCVIlP0X\n' +
  'J6m4xKDnEaRVig==\n' +
  '-----END RSA PRIVATE KEY-----';

在线生成公私钥

生成地址：
在线生成公私钥

生成类型选择
这里选择的是长度1024和pkcs8格式

封装

export default {
  /* 加密 */
  encrypt(data) {
    const PUBLIC_KEY = publicKey
    var encryptor = new JSEncrypt()
    encryptor.setPublicKey(PUBLIC_KEY)
    // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
    const result = encryptor.encryptLong(data)
    return result
  },
  /* 解密 - PRIVATE_KEY - 验证 */
  decrypt(data) {
    const PRIVATE_KEY = privateKey
    var encryptor = new JSEncrypt()
    encryptor.setPrivateKey(PRIVATE_KEY)
    // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
    var result = encryptor.decryptLong(data)
    return result
  }
}

完整代码

封装为一个rsa.js的文件

import JSEncrypt from 'encryptlong'

// 公钥key
const publicKey = '-----BEGIN RSA PRIVATE KEY-----\n' +
  'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDAux55DVJZtR3gTedDJb0PD2xa\n' +
  'GRL4KmOYxn83z436r+M8+EJ3rHO5RdtwsmjxAVhOwEmWPSOfRNPZOqDqFprvHmOo\n' +
  '3iCbCTPPL41grl7RtvgkdyJPVQ35u8xeNKirg2ksxh8uu/wr44dwch2EmNI6GIGk\n' +
  'p3gWaw4StfQlsHIURQIDAQAB\n' +
  '-----END RSA PRIVATE KEY-----'

// 私钥key
const privateKey = '-----BEGIN RSA PRIVATE KEY-----\n' +
  'MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAMC7HnkNUlm1HeBN\n' +
  '50MlvQ8PbFoZEvgqY5jGfzfPjfqv4zz4Qnesc7lF23CyaPEBWE7ASZY9I59E09k6\n' +
  'oOoWmu8eY6jeIJsJM88vjWCuXtG2+CR3Ik9VDfm7zF40qKuDaSzGHy67/Cvjh3By\n' +
  'HYSY0joYgaSneBZrDhK19CWwchRFAgMBAAECgYBDpyt6OKfon4AeRZphYrTrvXE+\n' +
  'a0DSZibR8ROlJrFjByzQMSE72whAR/pQo//cYal681qhZ1LCzKlEvqTPpyG5I7kE\n' +
  'WKDvfVRvtJq8kb5Jf4FoMiY+7DZf7O5akCBK+sRQU4gzx/rp7bWDjc+GdBcDHg3Q\n' +
  'Xsn+GC3UYa+7aLUsXQJBAPKEyjvhygmozyCnh+s4TUQJB+iO9SXoS5K8F1v671LH\n' +
  'KHcfxkDPtwLzYXgK8H+S8pfr2jYDlgiAPDMz7FHYHl8CQQDLcdB4xKP+WmSFfsyj\n' +
  'eHj3l5fQ1ogD7w0lT3Hq6G8pQ0tLwOjiolvgdk91yCbCT1iJ3dy7Hlas3idZm/1+\n' +
  '9IfbAkBaXLYJt+iSzs5WaXXQZAsOFZtXwKSBOlumUeUWRZqUqlZehH1XOs4DEHI5\n' +
  'y0GvFy7DAoMs6wslIbrMjUU5faBbAkEAtrrTdKWqZprqDr2FMI7UmA4g3gLSyDW+\n' +
  'qPRibYu3zGgVCUWL54PM4h9h33iW15BNBgewaqElWL9wuJvTZGReYQJAOXWP2iV3\n' +
  'v69MkYge/bUwnk3v2EsN1yv0IbFwpW8mVipwEpKCMn9k1lBvgJlcGSU3nCVIlP0X\n' +
  'J6m4xKDnEaRVig==\n' +
  '-----END RSA PRIVATE KEY-----';

export default {
  /* 加密 */
  encrypt(data) {
    const PUBLIC_KEY = publicKey
    var encryptor = new JSEncrypt()
    encryptor.setPublicKey(PUBLIC_KEY)
    // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
    const result = encryptor.encryptLong(data)
    return result
  },
  /* 解密 - PRIVATE_KEY - 验证 */
  decrypt(data) {
    const PRIVATE_KEY = privateKey
    var encryptor = new JSEncrypt()
    encryptor.setPrivateKey(PRIVATE_KEY)
    // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
    var result = encryptor.decryptLong(data)
    return result
  }
}

引入使用

引入进行测试，先本地测试一下加密解密的效果。

import rsa from '@/utils/rsa.js'
var name = 'wanjunshijie'
// 加密
console.log(name)
var name2 = rsa.encrypt(name)
console.log(name2)
var name3 = rsa.decrypt(name2)
console.log(name3)

接口数据处理

本地测试没问题的话，就可以应用到接口数据请求了。

getuserList() {
  var that = this
  axios({
    method: 'get',
    url: '/selectloginUser?name=' + that.loginname,
    data: {
      name: that.loginname
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    timeout: 100000,
  }).then(function (res) {
    console.log(rsa.decrypt(res.data))
  })
},