webpack - Webpack 5 模块联合:使用身份验证访问远程模块
问题描述
我正在使用 Webpack 5 Module Federation 来使用远程模块。一切都按预期工作。
到目前为止,远程模块 URL 是公开的,不需要任何类型的身份验证。这对开发人员来说很好。目的。但在生产中,访问该远程模块将需要某种身份验证。
我在 Webpack 文档中找不到任何关于身份验证的信息。
我想知道在这种情况下我有什么选择?
解决方案
我的回答对于像 JWT 这样的身份验证很有用,标头中带有令牌。
但是,如果您了解原理 - 您可以实现任何重用逻辑并实现任何身份验证。
我有管理面板并分为核心和几个模块。
我将管理面板分为 3 个部分:
- 核心:auth、Vues、路由器
- 模块 1 - 员工(模块之一)
- 模块2
我的 auth 像 JWT auth 一样工作(为每个请求添加了 auth 标头)。我将标头授权写入标头并在每个请求中传递令牌。
所以当我从模块发出任何请求时,任务就是在模块中获取这个令牌。如果没有这个逻辑,我会得到 301 并重定向,因为请求没有标头。
为此,我使用 axios 拦截器为每个请求添加标头(在核心中)和用户类从每个请求的本地存储中提取令牌(User.getToken() - 也在核心模块中)
您可以像在后端微服务中一样使用模块联合来实现交叉身份验证。
我完成已解决任务的步骤
- 为身份验证创建类 -例如用户
- 使用 User 类在主机中创建公开 | 我的意思是核心模块(我公开了 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 这里是例子
推荐阅读
- c# - No Controllers menu item on the Asp.net core 5.0 Web API project
- javascript - Acumatica 客户门户中是否有任何功能可以返回登录用户的名称/角色?
- arrays - 我如何在使用函数时对 C 语言中的数组求和?
- linux - 在 Linux Debian 10 的 cal CLI 应用程序中发现了一个错误
- javascript - 参考错误:未定义 LocalStorage - NextJS
- node.js - 如何快速将对象传递给其他文件?
- masstransit - 如何在 MassTransit 中分别配置请求超时和/或消息 TTL?
- ios - 模态对话框在基于 Mac 催化剂场景的应用程序中中断响应者链
- php - Laravel - 大集合和页面加载缓慢
- php - 如何在 wordpress 函数 php 中保存 cookie?