前端实现RSA加密登录

1、安装

（1）安装jsencrypt,执行以下命令：

npm install jsencrypt --save-dev

（2）安装encryptlong，执行以下命令：

npm install encryptlong --save-dev

2、创建rsa.js文件

（1）在src/utils/文件夹下创建rsa.js文件

（2） 引入‘jsencrypt’，‘encryptlong’

代码如下：

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

（3）准备publicKey（公钥）&& privateKey（私钥）

这个需要前后端统一一下；

// 密钥对生成 http://web.chacuo.net/netrsakeypair
// 公钥key(这个需要前后台对应一下)
const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCFX1EDg0pVZ+zH+aRHbeBK9uY2rfyM2g+l25pynZ0DuCk/+kIT726e2L1+z63JRm7V4hyZInxJZaUJHktME9rtpx2EOeEIiqdhYkedGJekuF66pjCZCMFkyxgGOQxCR9NjFjAhuGVvAMEk4EZJW5y/pRr5mQVeQw9xNKGBqrkgfQIDAQAB'

// 私钥key
// const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
//   'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
//   'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
//   '/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
//   'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
//   'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
//   '4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
//   'tTbklZkD2A=='

（4）完整的加密解密函数如下：

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

3、在main.js中进行引入；

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

4、rsa.js完整代码如下：

/* 产引入jsencrypt实现数据RSA加密 */
import JSEncrypt from 'jsencrypt' // 处理长文本数据时报错 jsencrypt.js Message too long for RSA

/* 产引入encryptlong实现数据RSA加密 */
import Encrypt from 'encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。

// 公钥key(这个需要前后台对应一下)
const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCFX1EDg0pVZ+zH+aRHbeBK9uY2rfyM2g+l25pynZ0DuCk/+kIT726e2L1+z63JRm7V4hyZInxJZaUJHktME9rtpx2EOeEIiqdhYkedGJekuF66pjCZCMFkyxgGOQxCR9NjFjAhuGVvAMEk4EZJW5y/pRr5mQVeQw9xNKGBqrkgfQIDAQAB'

// 私钥key
// const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
//   'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
//   'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
//   '/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
//   'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
//   'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
//   '4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
//   'tTbklZkD2A=='

export default {
  /* JSEncrypt加密 */
  rsaPublicData(data) {
    var jsencrypt = new JSEncrypt();
    jsencrypt.setPublicKey(publicKey)
    // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
    var result = jsencrypt.encrypt(data);
    return result
  },

  /* JSEncrypt解密 */
  // rsaPrivateData(data) {
  //   var jsencrypt = new JSEncrypt()
  //   jsencrypt.setPrivateKey(privateKey)
  //   // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
  //   var result = jsencrypt.encrypt(data)
  //   return result
  // },

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

5、在需要用到的.vue中进行使用RSA加密；

let passwordTed1 = this.Rsa.encrypt(this.formData.password); //对密码进行RSA加密
let passwordTed2 = this.Rsa.decrypt(passwordTed1) // 解密