Vue中对发送的请求体进行加密，3DES加RSA的方式

在我博客中的前面几篇文中中介绍了，基于Java端的RSA和3DES的加密算法，请参考：

环境信息

今天我介绍一下在前端如何进行请求体加密，并且配合上面我们介绍的这两篇文件，实现前后端的加解密解决方案。前端我使用的Vue，用的类库有：

axios
crypto-js
jsencrypt

这些类库都可以通过npm安装到，这里就不详细介绍安装过程了。

代码封装

类库安装好后，我首先基于这些类库编写了一个工具类，代码如下：

import CryptoJS from 'crypto-js/crypto-js'
import JsEncrypt from 'jsencrypt/bin/jsencrypt'

/**
 * 3DES加密
 * @param {*} password 
 * @param {*} data 
 */
export function tripleDESEncrypt(password, data) {
  var encrypted = CryptoJS.TripleDES.encrypt(data, CryptoJS.enc.Utf8.parse(password), {
    iv: CryptoJS.enc.Utf8.parse('01234567'),
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

/**
 * RSA公钥加密
 * @param {*} pupblicKey 
 * @param {*} data 
 */
export function rsaEncrypt(pupblicKey, data) {
  var jse = new JSEncrypt()
  jse.setPublicKey(pupblicKey);
  return jse.encrypt(data)
}

/**
 * 获取随机数
 * @param {*} length 
 */
export function getRandom(length) {
  return CryptoJS.lib.WordArray.random(length).toString();
}

import CryptoJS from 'crypto-js/crypto-js'

import JsEncrypt from 'jsencrypt/bin/jsencrypt'

/**

* 3DES加密

* @param {*} password

* @param {*} data

export function tripleDESEncrypt(password, data) {

var encrypted = CryptoJS.TripleDES.encrypt(data, CryptoJS.enc.Utf8.parse(password), {

iv: CryptoJS.enc.Utf8.parse('01234567'),

mode: CryptoJS.mode.CBC,

padding: CryptoJS.pad.Pkcs7

});

return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}

/**

* RSA公钥加密

* @param {*} pupblicKey

* @param {*} data

export function rsaEncrypt(pupblicKey, data) {

var jse = new JSEncrypt()

jse.setPublicKey(pupblicKey);

return jse.encrypt(data)

}

/**

* 获取随机数

* @param {*} length

export function getRandom(length) {

return CryptoJS.lib.WordArray.random(length).toString();

}

以上代码主要提供了，3DES加密封装，RSA加密封装，这些加密算法都是可以和后端的加密算法相匹配的使用的。另外提供了一个生产随机密码的方法，用于随机生产3DES的加密密码。

Axios拦截器

Axios中通过请求拦截器，在发送请求前，对请求体进行加密，核心代码如下

if (config.data) {
    // 生产随机密码
    var random = getRandom(8)
    // 密码RSA加密
    var encryptedRandom = rsaEncrypt(process.env.RSA_PUB_KEY(), random)
    config.headers['DES-Password'] = encryptedRandom

    // 数据加密
    var encryptedData = tripleDESEncrypt(random, JSON.stringify(config.data))
    config.data = encryptedData
}

if (config.data) {

// 生产随机密码

var random = getRandom(8)

// 密码RSA加密

var encryptedRandom = rsaEncrypt(process.env.RSA_PUB_KEY(), random)

config.headers['DES-Password'] = encryptedRandom

// 数据加密

var encryptedData = tripleDESEncrypt(random, JSON.stringify(config.data))

config.data = encryptedData

}

首先生产3DES的随机密码；
然后对该密码进行RSA公钥加密，放入到Header中，供后台代码取用；
使用第一步中生成的随机密码，采用3DES算法，对数据进行加密；

至此前端Vue加密结束

关于后端解密：我后端使用的是基于Spring Boot的Restful+JSON接口服务。所以解密的动作要在MappingJackson2HttpMessageConverter中进行了。需要定义该类的子类，并重写其中的readJavaType方法，在进行json转对象的动作之前，做好请求体的解密。解密的代码，请参考上面两篇文章中的代码。

Vue中对发送的请求体进行加密，3DES加RSA的方式

环境信息

代码封装

Axios拦截器

文章评论