VUE框架中利用JSEncrypt.js进行RSA加密

前言

本来项目使用的是base64来进行登录密码的传输，但是由于安全性问题，于是改为使用RSA来进行加密。

关于RSA加密

RSA算法是一种非对称加密算法，这一算法主要依靠分解大素数的复杂性来实现其安全性，由于大素数之积难被分解，因此该密码就难被破解。

几十年来，RSA算法经历了各种攻击的挑战，根据相关显示，目前被破解的最长RSA密钥是768个二进制位。也就是说，长度超过768位的密钥，还未被破解，至少目前尚未有人公开宣布。

RSA算法的优缺点

优点：RSA算法是国际标准算法，属于主流算法之一，应用广泛，兼容性比较广，能够适用于各种不同的系统之中，不容易出现限制问题。

缺点：RSA算法加密长度为2048位，对于服务器的消耗是比较大的，计算速度也比较慢，效率偏低，一般只适用于处理小量数据。

关于JSEncrypt.js

JSEncrypt是一个基于RSA加密、解密的js库

JSEncrypt的Github地址；

JSEncrypt的文档地址 ；

前端加密过程

一、获取公钥私钥

• 在终端中输入以下指令来获取私钥：

openssl genrsa -out rsa_1024_priv.pem 1024 // mac电脑可直接使用终端来输入 windows系统可使用git来输入

• 在终端中输入以下指令来查看私钥：

cat rsa_1024_priv.pem

• 在终端中输入以下指令来获取公钥：

openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem

• 在终端中输入一下指令来查看公钥：

cat rsa_1024_pub.pem

二、引入JSEncrypt

1. 安装：

// 通过npm下载
npm install jsencrypt

// 通过script引入
<script src=".../jsencrypt.min.js"></script>

2.引入：

import JSEncrypt from 'jsencrypt';

三、在methods中写RSA加密方法并调用这个方法

<template>
  <div>
            <input type="text" v-model="dataForm.username" placeholder="请输入用户名">
            <input type="password" v-model="dataForm.password" placeholder="请输入密码">
            <button type="submit" @click="submit()"> 登录</button>
  </div>
</template>

<script>
import JSEncrypt from 'jsencrypt'; // 引入jsencrypt库
export default {
  data () {
    return {
      dataForm: {
          username: '',
          password: '',
        }
    }
  },

  methods: {
    // 用户登录方法
    submit(){
      this.dataForm.password = this.goEncrypt(this.dataForm.password) // 调用RSA加密方法来加密
      this.$http.post('/url',this.dataForm).then() // 将加密的内容传给后端
    },
    // RSA加密方法
    goEncrypt(data){
        const encryptor = new JSEncrypt()
        // 之前生成的公钥↓
        const publicKey =
        `-----BEGIN PUBLIC KEY-----
              输入公钥
        -----END PUBLIC KEY-----`
        encryptor.setPublicKey(publicKey)
        return encryptor.encrypt(data)
      },
  },
  }

</script>
<style  scoped>
</style>

四、后端解密

将之前生成的私钥发给后端让他解密即可。