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
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 中发送请求时,我们通常使用 axios 库来进行网络请求。如果需要在发送请求获取请求参数,可以通过拦截器的方式来实现。 在 axios 中,拦截器有两种:请求拦截器响应拦截器请求拦截器会在发送请求前执行,响应拦截器会在接收到响应后执行。 我们可以在请求拦截器获取请求参数,然后再进行请求。具体的代码可以参考以下示例: ```javascript import axios from 'axios'; // 创建 axios 实例 const service = axios.create({ baseURL: 'http://api.example.com', // 接口的基础路径 timeout: 5000, // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( (config) => { // 在发送请求获取请求参数 const params = { // 这里可以编写获取请求参数的代码 }; // 将获取到的请求参数添加到请求配置中 config.params = { ...config.params, ...params, }; return config; }, (error) => { // 请求错误时的处理 console.error(error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response) => { // 对响应数据进行处理 return response.data; }, (error) => { // 响应错误时的处理 console.error(error); return Promise.reject(error); } ); export default service; ``` 在上面的代码中,我们通过 `interceptors.request.use` 方法添加了一个请求拦截器,它会在发送请求前执行。在拦截器中,我们可以通过编写获取请求参数的代码,将获取到的参数添加到请求配置中。最后,返回修改后的请求配置。 需要注意的是,如果请求参数需要异步获取,可以使用 `async/await` 或者 Promise 等方式来实现。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值