vue项目中axios拦截器处理多域名多token等配置

出现过一个vue项目不止一个请求地址、token、alliance_id (token、alliance_id后端需要的配置信息，因项目而异）

1、首先新建全局变量文件，一个开发环境文件一个生产环境文件

image.png

# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'https://test1.com'
VUE_APP_SECOND_API = 'http://test2.com'
VUE_APP_THIRD_API = 'http://test3.com'

# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = 'https://test1.com'
VUE_APP_SECOND_API = 'http://test2.com'
VUE_APP_THIRD_API = 'http://test3.com'

2、API中设置识别环境参数，这里属性名为requestBaseUrl

api 文件夹下的one.js文件

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: `/xxx/olist`,
    method: 'GET',
    requestBaseUrl: 'one',
    params
  })
}

api 文件夹下的 second.js文件

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: `/xxx/list`,
    method: 'GET',
    requestBaseUrl: 'second',
    params
  })
}

api 文件夹下的 third.js文件

import request from '@/utils/request'

export function login(data) {
  return request({
    url: `/xxx/login`,
    method: 'POST',
    requestBaseUrl: 'third',
    data
  })
}

3、开始配置request拦截器

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import Cookies from 'js-cookie'
import router from '../router'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 200000
})

// request interceptor
service.interceptors.request.use(
  config => {
    console.log('config', config)

    if (config.requestBaseUrl === 'second') { // test2API
      config.baseURL = process.env.VUE_APP_SECOND_API 
      config.headers['Alliance-ID'] = store.state.user.alliance_id ? store.state.user.alliance_id : 1000
    }

    if (config.requestBaseUrl === 'third') { // test3 API
      config.baseURL = process.env.VUE_APP_THIRD_API 
      config.headers['Alliance-ID'] = 1001
      if (store.state.user.accesstoken || Cookies.get('access_token')) { // 这个域名底下 token属性和属性值不同
        config.headers['authorization'] = Cookies.get('access_token')
      }
    }
    if (store.state.user.token && (config.requestBaseUrl === 'one' || config.requestBaseUrl === 'second')) {
      config.headers['token'] = store.state.user.token
    }

    config.headers['Content-Type'] = 'application/json'
    config.headers['Accept'] = 'application/json'

    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

具体可以打印出config参数，会有baseUrl、请求的url，header头部和自定义属性requestBaseUrl等

image.png