Webpack 5 模块联合：使用身份验证访问远程模块

Posted 2023-02-16

【中文标题】Webpack 5 模块联合：使用身份验证访问远程模块

【英文标题】：Webpack 5 Module Federation : Accessing Remote Module with Authentication

【发布时间】：2021-03-23 01:00:36

【问题描述】：

我正在使用 Webpack 5 Module Federation 来使用远程模块。一切都按预期工作。

到目前为止，远程模块 URL 是公开的，不需要任何类型的身份验证。这对开发人员来说很好。目的。但在生产中，访问该远程模块需要某种身份验证。

我在 Webpack 文档中找不到任何关于身份验证的信息。

我想知道在这种情况下我有哪些选择？

【问题讨论】：

为什么要验证对remote modules 的访问调用？它更容易和通用的方法来保护您的数据/api，而不是隐藏模块联合代码。

【参考方案1】：

您应该在托管您的联合模块的服务器上进行一些身份验证，例如 nginx。

proxy_cache_path /data/nginx/cache levels=1 keys_zone=foo:10m;

server 
    ...

    location / 
        auth_jwt             "closed site";
        auth_jwt_key_request /jwks_uri;
    

    location = /jwks_uri 
        internal;
        proxy_cache foo;
        proxy_pass  http://idp.example.com/keys;
    

【参考方案2】：

我的回答对于 JWT 之类的身份验证很有用，标头中带有令牌。

但如果您了解原理 - 您可以实现任何重用逻辑并实现任何身份验证。

我有管理面板，分为核心和几个模块。

我将管理面板分为 3 个部分：

核心：auth、Vues、路由器 模块 1 - 员工（模块之一） 模块2

我的身份验证像 JWT 身份验证一样工作（为每个请求添加身份验证标头）。 我将标头 authorization 写入标头并在每个请求中传递令牌。

所以当我从模块发出任何请求时，任务就是在模块中获取这个令牌。如果没有这个逻辑，我会得到 301 并重定向，因为请求没有标头。

为此，我使用 axios 拦截器为每个请求添加标头（在核心中） 和 User 类在每个请求上从本地存储中提取令牌（User.getToken() - 也在核心模块中）

---

您可以像在后端微服务中那样使用模块联合实现交叉身份验证。

我完成已解决任务的步骤

为身份验证创建类 - 例如用户 使用用户类在主机中创建公开 |我的意思是核心模块（我公开了 CoreModule 类，所以我不需要单独公开所有人员），在这个类中我导入 User 类 CoreModule 具有调用 User.init() 的方法 init - 在此方法中，我发出所有初始请求或从 ls 获取令牌 在 Module1 (EmployeeModule) 中导入 CoreModule 并在请求之前调用 CoreModule.init() - 例如在挂载页面挂钩上（如果您使用 React、Vue 或 Angular）。 如果您只想优化和初始化它，您可以公开 EmployeeModule (Module1) 并在那里导入 CoreModule。比您需要调用具有 CoreModule.init() 的 EmployeeModule.init() 的初始化。我将 EmployeeModule 暴露给 CoreModule 并在加载页面异步之前对其进行初始化（在我的情况下，我将所有模块导入核心并初始化它们）

---

它是如何工作的

当您在核心主机模块中导入 User 和 init 时 - 它会创建新实例，并且此类的新导入将返回指向新创建的类的链接。 但是如果你从 remoteEntry.js 导入这个类 - 将创建一个新实例，所以你需要先初始化它。这取决于您何时启动它以及是否需要它。

但是如果你想在多个模块中使用同一个类，你需要在使用前进行初始化，因为 webpack bundle 和 remoteEntry.js 不共享创建的类实例。

结果你将在 Core 和 module1 中拥有 User 类，与使用 User.getToken() 的拦截共享 axios，我希望它适用于你的情况 :)

感谢您的阅读，祝您有美好的一天！ :)

https://codesandbox.io/s/relaxed-bhaskara-tzlrj?file=/src/EmployeesModule.js 这里的例子