Axios - 更新导出的 axios.create 实例上的标头

Question

我有一个api.js，它默认导出一个axios.create() 实例：

import axios from 'axios'
import Cookies from 'js-cookie'

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${Cookies.get('Token')}`,
    Organization: Cookies.get('Organization'),
    Company: Cookies.get('Company')
  }
})

export default api

然后我将它导入到多个文件中，如下所示：

//api/users.js
import api from './api.js'

const methods = {
  postUser (params) {
    return api.post('/users', params)
  },
  getUser (id) {
    return api.get('/users/' + id)
  }
}

export default methods

但是会有一些函数应该更新 Cookie Organization 和 Company，我想知道是否可以更新默认的 api 实例并在所有使用它的导入中自动更新它。我知道一个简单的页面刷新会起作用，但我正在构建一个 SPA，我想阻止手动刷新屏幕。

Answer 1

您可以动态添加标头，这样每次请求都会读取 cookie。

import axios from 'axios'
import Cookies from 'js-cookie'

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
  // Static headers
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [function (data, headers) {
    // You may modify the headers object here
    headers['Authorization'] = `Bearer ${Cookies.get('Token')}`
    headers['Organization'] = Cookies.get('Organization')
    headers['Company'] = Cookies.get('Company')

    // Do not change data
    return data;
  }],
})

export default api

Answer 2

我建议阅读有关 axios 的拦截器。 (https://github.com/axios/axios#interceptors)

一个非常基本的例子如下。 假设您的 Web 服务将返回响应 http 状态 401 标头。 您将使用以下内容拦截响应：

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // happy case its 2XX
    return response;
  }, async (error) => {
    if (error.response.status === 401) {
        // do some logic to retrieve a new JWT or Cookie.get()
        const jwt = Cookies.get('Token');
        const config = error.config;
        config.headers['Authorization'] = `Bearer ${jwt}`;
    }
    
    return await axios.request(config);
});

然后，下一个请求将在请求标头上附加一个授权标头。