今天在用vue写项目的时候,因为写的是后台管理系统基本的接口都有token校验,所以在axios封装的时候header里面,就都配置上了token还有一些其他的参数,但是当前这个接口不需要token校验,header里面什么参数也不需要,这个时候我就开始想了,总不能在复制一份,axios封装吧。。。这太。。。然后就想到如下:

  1. 获取当前请求url
  2. 做一个类似的白名单说白了就是一个数组
  3. 在请求拦截器里面根据当前路径做出对应header的配置

那么第一个问题就来了,怎么获取当前的请求路径呢?以前还真没注意到这个事 就没想过,但是根据使用的经验应该是config里面的一个属性那就试试吧。。。。

上图吧直接:

http.interceptors.request.use(async config => {
      console.log(config)
      //一个数组白名单数组里面的路径都不需要token,都走下面的无token逻辑
      let WhiteList = ['/threeParty/identification/']
      let reqUrl=config.url //可以直接获取到当前请求的url地址
      WhiteList.includes(reqUrl)
      //不需要token的接口走这里
      if(WhiteList.includes(reqUrl)){
        //里面写具体的配置就好了
      }else {
        const data = await getUserToken()
        let resData = JSON.parse(data)
        storage.set("userInfos", resData);
        storage.set('token', resData.token)
        storage.set('mobile', resData.mobile)
        config.headers['token'] = resData.token
      }
      return config
    }, error => {
      return Promise.reject(error)
    }
)

 顺手打印出来的config的值:

好啦!今天的分享就到这里了,可能你们早就知道了,但是今天我蛮开心的 又补充了一个盲点,对待问题以后又多了一个解决方案,哟!!!下班了,下班下班。。。。

 

Logo

前往低代码交流专区

更多推荐