Перехват запроса Axios с помощью глобальных методов JS


Перехват запроса Axios с помощью глобальных методов JS

09.09.2020 10:07:23 Просмотров 35 Источник

У меня есть сайт с архитектурой на основе веб-компонентов, где каждый веб-компонент может быть отдельным приложением Vue с собственным уровнем API, интегрированным через Axios. Мне нужно реализовать промежуточное программное обеспечение Auth для всех HTTP-запросов, поступающих либо из корневого приложения, либо из приложения веб-компонента. Я не могу использовать встроенный механизм перехватчиков Axios, так как будет несколько экземпляров Axios. Есть ли способ сделать это с помощью глобальных методов JS? Я знаю, что есть какой-то API на основе расширения браузера, но это не похоже на то, что я ищу.

У вопроса есть решение - Посмотреть?

Ответы - Перехват запроса Axios с помощью глобальных методов JS / Intercept Axios request with global JS methods

Является ответом!
markoffden

15.09.2020 12:58:38

На всякий случай, если кто-то еще заинтересуется, я решил эту проблему с помощью сервисного работника. Вы можете подписаться на события fetch и отвечать в соответствии с вашей логикой аутентификации. Ваш код сервисного работника будет выглядеть примерно так:

self.addEventListener('fetch', async (event) => {
    const isAuthorised = await checkIsAuthorized(); // your auth API layer
    if (!isAuthorised) {
        const response = new Response(null, {
            status: 401,
            statusText: 'Unauthorised',
        });
        event.respondWith(response);
        return;
    }
    event.respondWith(fetch(event.request));
});

Service worker также способен перехватывать запросы axios от shadow DOM, поэтому он хорошо подходит для случая веб-компонентов.

Кроме того, есть хорошая статья Бартоша Польника о реализации уровня auth с помощью service worker.

Помочь в развитии проекта:
Закрыть X