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

Чтобы использовать экземпляр Axios, вам необходимо создать файл api.js в своем каталоге.

import axios from ‘axios’
export default axios.create({
 baseURL: `your API end point`,
 headers: {
 ‘Accept’: ‘application/json’,
 ‘Content-Type’: ‘application/json’
 }
 })

api.js будет вашим экземпляром Axios, который вы будете использовать позже, вы можете использовать их где угодно, если вы импортируете их туда. Затем вы можете просто использовать api.post (‘/…’). Then (…)

А теперь перейдем к перехватчикам Axios.

Для Vue вы можете добавить перехватчик практически где угодно, я собираюсь добавить его в файл main.js.

Vue.prototype.$http = api;

Вам нужно будет импортировать api.js в файл main.js, и эта одна строка кода выше является ключом к глобальному использованию экземпляра Axios для Vue.

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

Вот файл main.js

import api from "./services/api";
Vue.config.productionTip = false;
Vue.prototype.$http = api; 
api.defaults.timeout = 10000;
api.interceptors.request.use(
  config => {
    const token = localStorage.getItem("access_token");
    if (token) {
      config.headers.common["Authorization"] = token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
api.interceptors.response.use(
  response => {
    if (response.status === 200 || response.status === 201) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 400:
         
         //do something
          break;
      
        case 401:
          alert("session expired");

          break;
        case 403:
          router.replace({
            path: "/login",
            query: { redirect: router.currentRoute.fullPath }
          });
           break;
        case 404:
          alert('page not exist');
          break;
        case 502:
         setTimeout(() => {
            router.replace({
              path: "/login",
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
          }, 1000);
      }
      return Promise.reject(error.response);
    }
  }
);

В вашем запросе Axios для входа вы фактически храните токен, который возвращается из бэкэнда, в localStorage или cookie, этот перехватчик будет использовать этот запрос, чтобы установить заголовок для авторизации.

Это в основном способ использования перехватчиков Axios во всем мире. Конечно, этот код не идеален, ему есть что улучшить. Желая, чтобы это могло вам немного помочь.