Проблема при глобальном изменении заголовков AXIOS по умолчанию - Vue

Question

In main.js

import axios from 'axios';

axios.defaults.headers.common = {
    'Authorization': 'JWT ' + Vue.auth.getToken()
};

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //TODO: append the trailing slash

// Add modified axios instance to Vue prototype so that to be available globally via Vue instance
Vue.prototype.$http = axios;

До этого момента все работало нормально.(Я могу успешно войти в систему и сохранить токен)

Теперь у меня есть другой компонент, который извлекает список пользователей с сервера посредством вызова ajax, выполняемого для lifehook компонента ().Моя проблема в том, что когда я пытаюсь получить доступ к this.$http в компоненте, я получаю ответ об ошибке 401 от сервера, потому что заголовок Authorization недоступен для заголовков запросов (хотя у меня предварительно настроен файл axios.defaults.headers.общие)

Странно то, что если я нажму кнопку обновления в браузере, токен будет правильно прикреплен к заголовку запроса и список пользователей будет успешно извлечен **. **

Может ли кто-нибудь объяснить мне, почему это происходит?

Answer 1

Вы можете использовать перехватчики запросов Axios для глобального добавления ваших заголовков.

axios.interceptors.request.use(function (config) {
// Do something before request is sent
  return config;
}, function (error) {
// Do something with request error
   return Promise.reject(error);
});

. Вы можете получить доступ к читателям текущего запроса, используя config.header , и вы можете установить заголовки для запроса, например:

config.headers = {
   'Authorization': 'JWT ' + Vue.auth.getToken()
}

https://github.com/axios/axios

Answer 2

Вы можете создать класс для добавления глобальных заголовков по вашему выбору.

import axios from 'axios';

/**
 * A wrapper around an axios instance, preconfigured to have a base URL and auth headers
 */
class Axios {
    constructor(baseUrl, bearerToken) {

        return axios.create({
            baseURL: baseUrl,
            headers: {
                Authorization: `Bearer ${bearerToken}`
            }
        });
    }
}

export default Axios;

Затем в вашем app.js

import { Axios } from 'my/class'


const myService = new Axios('baseURL', 'bearerToken');

Answer 3

Вы пытались использовать asios.create ?

http/index.js:

import axios from 'axios'
import env from '../config/env'
import store from '../store'

export default (() =>
  axios.create({
    baseURL: env.API_HOST,
    headers: {
      common: {
        Authorization: store.getters['user/getAuthToken']
      }
    }
  }))()

main.js:

import http from './http'

Vue.prototype.$http = http

ДополнительноЯ использую действие магазина для обновления клиента axios:

updateHTTPClientAuthToken () {
  Vue.prototype.$http.defaults.headers.common.Authorization = this.getters.getAuthToken
}