axios前端加密通讯的处理

  • A+
所属分类:Web前端
摘要

今天谈一谈前段时间,项目中遇见的前端axios加解密的处理。先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。


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 

总结

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

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

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