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

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

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

环境信息

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

  • axios
  • crypto-js
  • jsencrypt

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

代码封装

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

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

Axios拦截器

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

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

至此前端Vue加密结束

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

 

本文作者:大席
首发网站:大席的博客
版权声明:本博客所有文章除特别声明外,均为原创作品,转载请附带本段文字并注明本文出处

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据