Vue.js 使用全局JS方法拦截Axios请求

我有一个基于web组件架构的网站，其中每个web组件可能是一个单独的Vue应用程序，通过Axios集成了自己的API层。我需要为来自根应用程序或web组件应用程序的所有HTTP请求实现Auth中间件。我不能使用Axios内置拦截器机制，因为Axios将有多个实例。有没有一种方法可以用全局JS方法实现？我知道有，但这似乎不是我要找的东西。

为了防止其他人感兴趣，我已经和服务人员解决了这个问题。您可以订阅

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还能够拦截来自shadow DOM的axios请求，因此它非常适合web组件的情况

此外，还有一个关于使用服务工作者实现身份验证层的问题