vue请求拦截器获取当前请求路径及相关信息

今天在用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的值:

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

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值