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

我会带着你远行 2021-09-02 03:59 584阅读 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都会加上拦截器，这就导致不需要拦截器里面添加字段的地方，会报错  
例如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

--------------------

# 解决方案： #

提示：你不能直接在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

调用  
在你需要的地方，进行到入即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2][]

### 关键点 ###

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

## 结束语 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/9ce7449543894199be54c1a2d10527ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/a0a5a8a6fa584840bb6569592702be94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/436e82ea6fc4432c8b24f6906fe83760.png