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

---

总结

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

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

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