Intercept Axios request with global JS methods

Question

I have a site with web components based architecture, where each web component may be a separate Vue app with it's own API layer integrated via Axios. I need to implement Auth middleware for all HTTP requests, coming from either root app or web component app. I cannot use Axios built-in interceptors mechanism as there will be multiple instances of Axios. Is there a way I can do it with global JS methods? I know there is some browser extension based API out there, but that doesn't seem like something I am looking for.

Answer 1

Just in case anybody else is interested, I have solved it with service worker. You can subscribe to fetch events and respond according to your auth logics. Your service worker code will look something like following:

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 is able to intercept axios requests from shadow DOM as well, so it's a good match for web components case.

Besides, there is a nice article by Bartosz Polnik on implementing auth layer using service worker.