在我博客中的前面几篇文中中介绍了,基于Java端的RSA和3DES的加密算法,请参考:
环境信息
今天我介绍一下在前端如何进行请求体加密,并且配合上面我们介绍的这两篇文件,实现前后端的加解密解决方案。前端我使用的Vue,用的类库有:
- axios
- crypto-js
- jsencrypt
这些类库都可以通过npm安装到,这里就不详细介绍安装过程了。
代码封装
类库安装好后,我首先基于这些类库编写了一个工具类,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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中通过请求拦截器,在发送请求前,对请求体进行加密,核心代码如下
1 2 3 4 5 6 7 8 9 10 11 |
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转对象的动作之前,做好请求体的解密。解密的代码,请参考上面两篇文章中的代码。
文章评论