出現(xiàn)過一個(gè)vue項(xiàng)目不止一個(gè)請求地址、token裳凸、alliance_id (token、alliance_id后端需要的配置信息劝贸，因項(xiàng)目而異）

1姨谷、首先新建全局變量文件，一個(gè)開發(fā)環(huán)境文件一個(gè)生產(chǎn)環(huán)境文件

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中設(shè)置識別環(huán)境參數(shù)梦湘，這里屬性名為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')) { // 這個(gè)域名底下 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參數(shù)件甥，會有baseUrl捌议、請求的url，header頭部和自定義屬性requestBaseUrl等

image.png