【React-admin】构建React应用（9）-基于React-admin添加请求头

在项目中碰到这么一个需求，我应用的数据可以根据不同的中心来进行展示和处理，那么就需要在选择中心后，每次的数据操作(包括增删改查)都需要基于此中心，那么就需要每次将中心的标志id或其他参数在请求中一起发送给服务端。

如果你把中心的id放在body体中，那么你需要将id每次都得分装一次放到body中，连着其他的参数发往服务端，这样做冗余量太大。而且如果切换中心，即便你将中心的相关标识存储到本地，比如localstorage中，那么你每次发送请求的时候都需要取一次，挺麻烦的。

所以想办法在请求拦截的地方将参数写入到请求头header中，一次引入，终身受用。

由于框架是React-admin，但是其封装的一系列ajax都是基于axios，原理都是一样，如果你是基于React-admin或者axios做的请求，那么需要在请求的拦截处去处理了这个参数

// 请求响应拦截
[__ajax.instance, _ajax.instance].forEach(instance => {

  // 请求拦截
  instance.interceptors.request.use(cfg => {
    cfg.headers.qcc = localStorage.getItem("qcc")
    cfg.headers.virtual = localStorage.getItem("virtual")
    cfg.headers.app = "managewithgroups"
    return cfg;
  }, error => {
    // Do something with request error
    return Promise.reject(error);
  });

  // 响应拦截
  instance.interceptors.response.use(res => {
    // Do something before response
    if (res.data.errorCode === "70001") {
      notification.error(
        {
          message: 'System Information',
          description: res.data.errorMessage
        }
      )
      toLogin()
    }
    return res;
  }, error => {
    // Do something with response error
    console.log("error", error)
    return Promise.reject(error);
  });
});

上面是一个关于请求的拦截和响应拦截的处理，由于是每次请求需要携带额外的参数，那么将你的参数写入到header

cfg.headers.qcc = localStorage.getItem("qcc")
cfg.headers.virtual = localStorage.getItem("virtual")
cfg.headers.app = "managewithgroups"

这么几句话就可以了，由于中心是可以切换的，所以我用到了本地缓存，每次切换的时候将数据缓存到本地，然后在发送请求的时候，都会从缓存中取到最新的数据，并封装到请求头header中。