vue:axios拦截器

拦截器分两类：请求拦截器和响应拦截器

一、请求拦截器

在请求发出之前设置一些信息。比如说设置请求头，

在use方法参数即第一个函数的形参中通过config来做信息的配置，配置完之后，必须把config返回，这样才能完成拦截器的功能。第二个函数用于处理错误的信息。

用拦截器的方式配置请求头会更加灵活。拦截器中可以通过config获取更多的信息，比如url地址，这样就可以根据url作出判断，某些url可以添加一个请求头，而别的url不添加请求头。

 

通过拦截器，我们可以控制所有的请求。

下面来分析项目中的请求拦截器

// request拦截器
service.interceptors.request.use(

  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }

    // params参数编码
    let url = config.url;
    console.log(url)

    if (config.params) {
      console.log(config.params)
      url += '?';
      let keys = Object.keys(config.params);
      console.log(keys)
      for (let key of keys) {
        if (config.params[key] !== null && config.params[key] !== "") {
          url += `${key}=${encodeURIComponent(config.params[key])}&`;
        }
      }
      console.log(url)
      url = url.substring(0, url.length - 1);
      console.log(url)
      config.params = {};
    }
    config.url = url;
    return config;
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)

下面来分析代码：

medMaterial.getAuditorsByPrepareId({
  prepareId: edit.id,
  productId: edit.productId,
  enterpriseId: edit.enterpriseId1
}).then(res => {
  if (res.success) {

.........

js中的代码为：

getAuditorsByPrepareId(query){
    return request({
      url: '/medMaterial/getAuditorsByPrepareId',
      method: 'post',
      params: query
    })
  },

后台：

@PostMapping("/getAuditorsByPrepareId")
    public Result getAuditorsByPrepareId(@RequestParam(required = false) String productId,@RequestParam String enterpriseId,@RequestParam String prepareId) {
　　　　。。。。。
    }

当我们发出上面的一个请求，请求拦截器就会将参数的值进行编码，然后将参数通过？号拼接到url中。拼接后的url如下所示：

http://localhost:8008/api/medMaterial/getAuditorsByPrepareId?prepareId=444&productId=20663&enterpriseId=81

1、先判断token是否存在，如果存在，让每个url都添加请求头Authorization

2、通过config获取url：/medMaterial/getAuditorsByPrepareId

3、通过url获取params:{prepareId: 444, productId: 20663, enterpriseId: 81}

4、先给url拼接一个？号：/medMaterial/getAuditorsByPrepareId？

5、获取config中参数params中所有的key即keys：["prepareId", "productId", "enterpriseId"]

6、遍历keys,如果params中key的值不为null或不为空字符串，先对key的值进行encodeURIComponent编码，编码后的结果放入${}中，key不编码。由于该方法encodeURIComponent不会对 ASCII 字母和数字进行编码，故对value进行编码后的结果url仍然为：/medMaterial/getAuditorsByPrepareId?prepareId=444&productId=20663&enterpriseId=81&

7、去掉最后的&得到的url：/medMaterial/getAuditorsByPrepareId?prepareId=444&productId=20663&enterpriseId=81

再比如备货详情中，点击查看按钮，发送的请求如下：

const query = { type: row.type,materialName: row.materialName,materialCode: row.materialCode,batch: row.originalBase }
        console.log(query)
        prepare.queryFullChain(query).then(response => {
          console.log(response)
          if(response.success){

js中的代码如下：

queryFullChain(query) {
    return request({
      url: '/prepare/queryFullChain',
      method: 'post',
      params: query
    });
  },

1、先判断token是否存在，如果存在，让每个url都添加请求头Authorization

2、通过config获取url：/prepare/queryFullChain

3、通过url获取params:{type: "0", materialName: "天麻", materialCode: "TM001", batch: "11"}

4、先给url拼接一个？号：/prepare/queryFullChain？

5、获取config中参数params中所有的key即keys：["type", "materialName", "materialCode", "batch"]

6、遍历keys,如果params中key的值不为null或不为空字符串，先对key的值进行encodeURIComponent编码，编码后的结果放入${}中，key不编码。由于该方法encodeURIComponent不会对 ASCII 字母和数字进行编码，故对value进行编码后的结果url为：/prepare/queryFullChain?type=0&materialName=%E5%A4%A9%E9%BA%BB&materialCode=TM001&batch=11&，注意对中文进行了编码。

7、去掉最后的&得到的url：/prepare/queryFullChain?type=0&materialName=%E5%A4%A9%E9%BA%BB&materialCode=TM001&batch=11

以上分析可知：当在向后台发起请求时，config中存在params时，参数会被拼接到url中，后台只能用@RequestParam来接收参数。

当向后台发起请求时，没有params，而是data，如下所示：

saveList(query) {
    return request({
      url: '/intelDrugStore/saveList',
      method: 'post',
      data: query
    })
  },

请求参数在JSON中，故后台只能用@RequestBody接收参数。

后台

@PostMapping("/saveList")
    @ResponseBody
    public Result saveList(@RequestBody List<IntelDrugStore> listData) {
　　　　。。。。
    }

二、响应拦截器

浏览器在获取响应数据之前对数据做一些加工处理。

Use方法的第一个参数即第一个函数的形参res表示后台返回的具体数据信息。res并不是实际的数据，而是axios包装的对象，通过对象中的data才能拿到数据。这和之前获取后台数据的时候是一样的。

如果在调用接口的时候，只关心实际的数据而不需要包装对象，故可以集中的在响应拦截器做一些加工。如下所示

这样再次发请求调接口的时候，最终拿到的就是实际的数据了。

这样的话，以后我们调用任何接口，所有then当中得到的数据，都是我们实际需要的后台返回来的数据。不需要再通过点data的方式获取数据了。

 项目中的响应拦截器如下：

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const headers = response.headers
    // 此类为下载流文件，不拦截
    if (headers['content-type'] === 'application/octet-stream;charset=utf-8') {
      return response
    }
    if (headers['content-type'] === 'arrayBuffer;charset=UTF-8') {
      return response
    }
    const res = response.data
    if (res.code !== 1) {
      if(res.code === 301){
        Message({
          message: res.msg,
          type: 'error',
          duration: 5 * 1000
        })
        location.reload()
      }

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm(
          '你已被登出，可以取消继续留在该页面，或者重新登录',
          '确定登出',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('请重新登录')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: '请求超时,请联系管理员!',
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

 响应拦截器代码分析：

1、由于后台EasyPOIUtils在下载Excel时，设置了响应头，如下：

response.setHeader("Content-type", "text/html;charset=UTF-8");
            response.setCharacterEncoding("utf-8");//设置编码集,文件名不会发生中文乱码

            response.setContentType("application/force-download");//
            response.setHeader("content-type", "application/octet-stream");
            response.addHeader("Content-Disposition", "attachment;fileName=" + new String(fileName.getBytes(), "utf-8"));// 设置文件名
            response.addHeader("Content-Length", "" + file.length());
            response.setHeader("Access-Control-Allow-Origin", "*");

 故响应拦截器不拦截。

2、由于在下载图片时，PtsFileController中设置了响应头，

@RequestMapping(value = "/picDownload")
    public void picDownload(  String filePath,HttpServletResponse response)throws Exception{
        File file = new File(filePath);
        ServletOutputStream  out = null ;
        BufferedInputStream buf  = null ;
        response.setHeader("Content-Type","arrayBuffer");
        try{
            buf = new BufferedInputStream(new FileInputStream(file));
            out = response.getOutputStream();
            byte[] buffer =  new byte[1024];
            while(buf.read(buffer) != -1){
                out.write(buffer);

            }
            out.flush();
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            if(buf!= null){
                buf.close();
            }
            if(out != null){
                out.close();
            }
        }
    }

 故响应拦截器不拦截。

3、response并不是实际的数据，而是axios包装的对象，通过对象中的data才能拿到数据.

4、由于后台ResultCode类中设置请求成功的code为1，

/**
     * 请求成功Result
     */
    public static final int SUCCESS=1;

当我们要返回数据给前端时，会设置code为success

result.setSuccess(false);
                result.setMsg("请修改密码后再登录!");
                result.setCode(ResultCode.SUCCESS);
                return result;

此时res.code等于1，返回response.data给前端。

如果res.code不等于1，由于后台设置了用户登录超时的code为301

/**
     * 用户未登录或登录超时
     */
    public static final int NO_LOGIN = 301;

当我们要返回数据给前端时，会设置ResultCode为NO_LOGIN

User u = (User) redisService.get(pre + "TPS-TOKEN" + token);
            if (null == u) {
                rs.setSuccess(false);
                rs.setCode(ResultCode.NO_LOGIN);
                rs.setMsg("非法登录或者token已失效！");
                return rs;
            }

此时res.code为301，则进行错误消息的提示，type为error，message为后台返回的消息，duration为持续的时长，这里为5s.

location.reload()方法用于刷新当前文档。reload() 方法类似于你浏览器上的刷新页面按钮。