Как сделать HTTP перехватчик, чтобы вставлять токен в заголовки запроса?

В Vue.js вы можете использовать библиотеку Axios для отправки HTTP-запросов и перехватывать их с помощью интерцепторов.
Для вставки токена в заголовки запроса, вам необходимо создать интерцептор, который будет добавлять токен в каждый исходящий запрос. Вот пример использования интерцептора:

import axios from 'axios';

// Чтобы создать экземпляр Axios с настройками по умолчанию
const instance = axios.create();

// Создать интерцептор запроса
instance.interceptors.request.use(function (config) {
  // Получить токен из вашего хранилища (localStorage или Vuex, например)
  const token = localStorage.getItem('token');
  
  // Добавить токен в заголовки запроса
  config.headers.Authorization = `Bearer ${token}`;
  
  return config;
}, function (error) {
  // Обработка ошибки
  return Promise.reject(error);
});

// Теперь вы можете использовать экземпляр axios для отправки запросов,
// и токен будет автоматически добавлен в заголовки каждого запроса
instance.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });

В этом примере мы создаем экземпляр Axios с настройками по умолчанию, а затем добавляем интерцептор для запросов. В интерцепторе мы получаем токен из хранилища и добавляем его в заголовки запроса с помощью свойства config.headers.Authorization. После этого мы возвращаем измененную конфигурацию запроса.
Теперь, когда мы используем этот экземпляр axios для отправки запросов, интерцептор будет автоматически добавлять токен в заголовки каждого запроса.

Это общий подход к решению проблемы. Однако, реализация может варьироваться в зависимости от того, как вы храните и получаете токен. Вы можете использовать другие хранилища и добавить дополнительную логику для обработки ошибок или обновления токена при истечении его срока годности.