vue-axios中拦截器加了token 和其他字段,但是有的接口请求的时候不需要带token和其他字段,怎么操作?

67 篇文章 2 订阅
22 篇文章 0 订阅

项目场景:vue-axios中拦截器加了token 和其他字段,但是有的接口请求的时候不需要带token和其他字段,怎么操作?

问题描述:

提示:我做的是两套系统,一套系统目前做了鉴权处理,一套不带鉴权处理。现在要在带鉴权处理的系统,用不带鉴权处理系统的一个接口
例如:
APP 中接收数据代码:

import axios from 'axios'
axios.interceptors.request.use(
  config => {
    // 这里的config包含每次请求的内容
    const token = window.localStorage.getItem('token')
    const Mail = window.localStorage.getItem('Mail')
    const password = window.localStorage.getItem('password')
    if (token && Mail && password) {
      config.headers.token = token
      config.headers.username = Mail
      config.headers.password = password
    }
    return config
  },
  err => {
    console.error('api request 请求出错:', err)
    return Promise.reject(err)
  }
)

原因分析:

提示:这里填写问题的分析:这里可以看出,直接在axios上添加了拦截器。axios.interceptors.request.use,所以全局所有的axios都会加上拦截器,这就导致不需要拦截器里面添加字段的地方,会报错
例如:
在这里插入图片描述


解决方案:

提示:你不能直接在axios上添加拦截器啊,这是全局的,那该怎么办呢?
例如:你可以重新创建一个axiso,赋值,然后将这个axios暴露出去

import axios from 'axios'
const api = axios.create()
// api.defaults.baseURL = Config.baseUrl.locallhost
api.defaults.baseURL = Config.baseUrl.dev
api.interceptors.request.use(
  config => {
    // 这里的config包含每次请求的内容
    const token = window.localStorage.getItem('token')
    const Mail = window.localStorage.getItem('Mail')
    const password = window.localStorage.getItem('password')
    if (token && Mail && password) {
      // 添加headers
      config.headers.token = token
      config.headers.username = Mail
      config.headers.password = password
    }
    return config
  },
  err => {
    console.error('api request 请求出错:', err)
    return Promise.reject(err)
  }
)
export default api

调用
在你需要的地方,进行到入即可
在这里插入图片描述

关键点

const api = axios.create() // 创建一个新的axios

结束语

新创建一个axios的用处就是,拦截器需要加字段的地方,就加。不需要加,就用最开始的axios

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值