达夕博客
  • 首页
  • 软件工具
    • 提高生产力
    • 数字化办公
    • 智能手机
    • 开发工具
  • 技术编程
  • 互联网
  • 关于
  1. 首页
  2. 技术编程
  3. 正文

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

2018年06月02日 5990点热度 1人点赞 0条评论

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

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

  • 通用的Java 3DES加密工具类,在线工具验证通过
  • 通用的Java RSA加密工具类,可在线验证通过

环境信息

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

  • axios
  • crypto-js
  • jsencrypt

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

代码封装

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

JavaScript
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中通过请求拦截器,在发送请求前,对请求体进行加密,核心代码如下

JavaScript
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
}

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

至此前端Vue加密结束

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

 

标签: 3DES RSA TripleDES Vue 前端加密
最后更新:2018年06月02日

达夕

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
Intellij Idea 2020.3.1无限试用激活补丁 PDF全能解决方案Adobe Acrobat DC 2020 SP 直装特别版 IntelliJ IDEA 开发助手插件DevHelper 1.0.2版本发布 IntelliJ IDEA 开发助手插件DevHelper发布啦,充分提高工作效率 全能数据库管理工具Navicat 15 旗舰版x64位安装激活 Redis可视化工具Redis Desktop Manager 2020.2下载 v2ray启动报code=exited, status=218/CAPABILITIES错误的解决方法 Adobe Photoshop 2020 V21.1.0.106 绿色特别版
Windows安装版Redis Desktop Manager 2019.4下载IntelliJ Idea最新版2019.3.3激活方法PowerDesigner 16.6的安装破解资源下载Windows安装版Redis Desktop Manager 2019.5下载Adobe Photoshop 2020 V21.1.0.106 绿色特别版三步完成PowerDesigner 16.5的安装破解汉化Intellij Idea 2020.3.1无限试用激活补丁Sublime Text 3 最新版3176激活方法
利用Eclipse三步导出可执行jar包 [分享]印象笔记 Windows V6 版|1 次大更新, 10 大新功能! 三个密码设定技巧,让你远离密码泄露 看板方法系列3:限制在制品原则 icons8 针对Apple Google与微软风格设计的大量扁平图标下载 将Dropbox账号关联到你的Google账号,方便一键登录 新版Google Photo更加强大的图片编辑功能 卸载Windows10应用商店中自带软件的方法
标签聚合
印象笔记 Google Drive iPhone Evernote 激活 敏捷开发 Windows 10 Google Chrome IntelliJ Idea Dropbox
推荐文章

COPYRIGHT © 2020 达夕博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS