axios前端加密通讯的处理

今天谈一谈前段时间,项目中遇见的前端axios加解密的处理。

先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。

一、拦截器InterceptorManager

遇见这个需求,或许从axios文档中,我们第一时间想到的就是InterceptorManager。

axios.interceptors.request.use(req => {
// todo 加密
})
axios.interceptors.response.use(rsp => {
// todo 解密
})

但是现在需求升级了,我们要求前端根据服务端的响应状态码自动切换加密或者明文通迅。

我们再回过头看看InterceptorManager还合适么?

当然这个需求在一般情况下是比较少见的,但是确实存在不是么?接下来我们看看方法2

二、代理axios.request方法。

可以实现,但是还是略为复杂。

import Axios from 'axios/lib/core/Axios'
import axiosBind from 'axios/lib/helpers/bind'
import axiosUtils from 'axios/lib/utils' // todo 导入 加密的securityAxios, 正常的defaultAxios。
// todo 导入 全局变量isSecurity控制是否需要加密 async function requestProxy(...args) {
if(isSecurity){
return await securityAxios.request(...args)
}
return await defaultAxios.request(...args)
}
function createInstance(defaultConfig) {
const context = new Axios(defaultConfig);
Object.defineProperty(context, 'defaults', {
get() {
return isSecurity ? securityAxios.defaults : defaultAxios.defaults;
},
})
context.request = requestProxy; var instance = axiosBind(requestProxy, context);
axiosUtils.extend(instance, Axios.prototype, context);
axiosUtils.extend(instance, context); return instance;
} const axiosInstance = createInstance();
axiosInstance.axios = axiosInstance; export default axiosInstance;

这种方式看看就好了,当时是半路接过来某项目选择了这种方式简单优化下。

三、包装自定义的fetch方法


export function fetch(...args){
if(isSecurity){
return securityAxios(...args);
}
return defaultAxios(...args);
}

此方法相对上面的方法,实现更方便,但是如果项目中使用的是axios的实例去操作,则这种方式修改的地方太大了。

四、自定义Adapter

大概这种方式是最优解了。

import axios from 'axios'

export default ((defaultAdapter) => {
function security(cfg){
// todo 构建新的加密后的config;
return newCfg;
}
function unsecurity(rsp){
// todo 解密返回的加密串;
return newRsp;
}
return function securityAdapter(config){
const securityConfig = security(config)
const resp = defaultAdapter(securityConfig)
return unsecurity(resp)
}
})(axios.default.adapter)
import securityAdapter from './securityAdapter'
const securityAdapter = axios.create({
adapter: securityAdapter,
})
// todo

总结

以上几种方式,都是我实际项目中,遇见的实现方式,或是自己的处理方式。

  • 方法一,不够解藕,拦截器很容易过于复杂;
  • 方法二,过于繁所;
  • 方法三,需要修改现有的代码;
  • 方法四,暂时来看是最合适的

需求继续升级,如果,前端加密后,发现后端需要接收明文,切换后,需要重新请求,那么哪种方式修改起来最方便呢?

axios前端加密通讯的处理的更多相关文章

  1. Javascript到PHP加密通讯的简单实现

    其实内容主要来源于上一篇博文,只是重新组织了语言,并做了原理性的阐述,更容易理解:P ----------------------------------------- 华丽的分割线 -------- ...

  2. RSA非对称性前端加密后端解密

    前端加密代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  3. Java 前端加密传输后端解密以及验证码功能

    目录(?)[-] 加密解密 1 前端js加密概述 2 前后端加密解密 21 引用的js加密库 22 js加密解密 23 Java端加密解密PKCS5Padding与js的Pkcs7一致 验证码 1 概 ...

  4. 转发:RSA实现JS前端加密,PHP后端解密

    web前端,用户注册与登录,不能直接以明文形式提交用户密码,容易被截获,这时就引入RSA. 前端加密 需引入4个JS扩展文件,jsbn.js.prng4.js.rng.js和rsa.js. <h ...

  5. RSA实现JS前端加密,PHP后端解密

    web前端,用户注册与登录,不能直接以明文形式提交用户密码,容易被截获,这时就引入RSA. 前端加密 需引入4个JS扩展文件,jsbn.js.prng4.js.rng.js和rsa.js. <h ...

  6. 论 Web 前端加密的意义

    论 Web 前端加密的意义 Web前端密码加密是否有意义? https://www.zhihu.com/question/25539382 https://blog.csdn.net/hla19910 ...

  7. EFK教程(4) - ElasticSearch集群TLS加密通讯

    基于TLS实现ElasticSearch集群加密通讯 作者:"发颠的小狼",欢迎转载 目录 ▪ 用途 ▪ ES节点信息 ▪ Step1. 关闭服务 ▪ Step2. 创建CA证书 ...

  8. RSA前端加密

    昨天做了登陆模块,接触了md5&RSA加密.有点意思,talk is cheap,show me the code! 前端加密 为什么要加密 前端加密的方式 后台如何解密 1 为什么要加密? ...

  9. 前端加密MD5

    今天接触了MD5加密方式,记录一下使用方法,又去搜了搜关于MD5的详细内容 MD5在vue中使用方法 1.下载MD5模块 cnpm install md5 -S 2.引入模块 const md5 = ...

随机推荐

  1. C语言初级编程实践:2048小游戏

    大部分同学学习C语言编程以后不知道能通过什么样的项目才可以锻炼自己的思维功力,2048相信大家都应该熟悉,不管是手机上还是网页版的相信大家都玩过,这个简单的控制台版本的游戏是我曾经在伟易达上班时一个嵌 ...

  2. 走进flex布局

    简介:flex 是一个CSS的display 属性中新添加一个值. 随着inline-flex的使用,它将使它适用的元素成为一个flex container(伸缩容器),而这个元素的每个子元素将成为 ...

  3. Java多线程中的wait/notify通信模式

    前言 最近在看一些JUC下的源码,更加意识到想要学好Java多线程,基础是关键,比如想要学好ReentranLock源码,就得掌握好AQS源码,而AQS源码中又有很多Java多线程经典的一些应用:再比 ...

  4. Linux之【安装系统后的调优和安全设置】

    关闭SElinux功能 •修改配置文件使其永远生效 第一种修改方法vi vi /etc/sysconfig/selinuc 或者 vi /etc/selinux/config修改: SELINUX=d ...

  5. maven依赖问题的出现原因与解决方式

    摘要 maven依赖问题作为开发者应该是经常遇到的问题,在个人单独开发单独维护的项目里,可能体现不那么明显,一是自己对导入的jar大部分都很明确,二是出现问题第一解决发现也很快,问题就没那么严重,而在 ...

  6. Python音视频开发:消除抖音短视频Logo和去电视台标

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 对于带Logo(如抖音Logo.电视台标)的视频,有三种方案进行Logo消除: 直接将对应区域用对应图像替换: 直接将对应区域模糊化: 通过变换将要 ...

  7. OpenCV-Python setMouseCallback回调函数中图像变量img的传递方法解析

    ☞ ░ 前往老猿Python博文目录 ░ 一.使用全局变量进行变量传递 OpenCV-Python中可以使用setMouseCallback来设置鼠标事件的回调函数,我们来看个样例. 1.1.案例1代 ...

  8. PyQt学习随笔:QTableWidget水平表头horizontalHeader、竖直表头verticalHeader的相关操作方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget表格部件的表头包括水平表头和竖直表头,水平表头每节对应表格的一列,竖直表头对 ...

  9. PyQt学习随笔:Model/View架构中的Delegate(委托)

    不同于MVC模式,Model/View设计并不包含用于处理与用户交互的完全独立的部件, 没有将用户交互部分完全分离.一般地,视图负责把模型数据显示给用户,以及处理用户的输入.但是,对于某些特殊要求(比 ...

  10. PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox的ButtonRole详解

    一.引言 在Designer中创建的QDialogButtonBox对应的Button,都有指定的ButtonRole,而我们创建自定义的Button加入到QDialogButtonBox中去时,也需 ...