javascript - 在将组件转换并发送给客户端之前，基于每个组件的权限控制捆绑 react 组件

Question

1. 我正在使用 asp.net core 开发一个相关的网络应用程序。
2. 我正在开发 React 组件，使用 ES 和 JSX 语法编写我的所有组件。
3. 我运行 webpack 来转译我的所有代码(所以现在我已经准备好提供预转译文件)
4. 收到请求时，我只提供预转包。

我希望有一种方法可以仅将特定于用户的组件(基于他们有权访问的功能列表)捆绑和发送到客户端。

我能想到的唯一方法是“即时权限控制的组件捆绑与即时 jsx 编译相结合”来为我的组件提供服务。

我认为 webpack 不应该像这样用作即时打包器，所以这是不可能的......

我想出的部分零碎的解决方案:

在我的 js 中不使用导入或导出机制，我使用 Razor 循环浏览我的功能列表，将适当的(主要是模块化的)组件添加到页面，我称之为“依赖第一顺序”，并在每个结束组件的代码，我写

class ComponentA extends React.Component { //Component Code Here }

window.ComponentA = ComponentA;

所以所有组件都是全局的，可以渲染。这样，我就可以选择使用 Razor 将哪些组件发送到客户端。现在，还记得我说过“主要是模块化”吗？好吧，如果我在用户无法访问的另一个组件中渲染一个组件，这个部分解决方案将使渲染语句嵌入到渲染子组件本身的主组件中，而没有它应该实际渲染的组件代码在那里。这是一个肮脏的部分解决方案，如果该组件不存在并继续前进，我会抑制错误。

底线是我真的很难让我的 React 组件 100% 模块化，并且能够控制我的“组件依赖性”的粒度，这样客户端上就没有代码了用户不应该访问。

有人向我提供了荒谬的解决方案:

我当然不可能为每个用户生成一组 bundle ，每当管理员更改用户有权访问的内容时，我都会使用 webpack 重新渲染该 bundle 。 (特别是因为我在这里与成千上万的用户打交道)。当我写下所有这些时，我越来越觉得自己只是一个完美主义者，应该继续上面的段落。

我应该采用的解决方案:

有一种意识形态是将所有 js 发送到浏览器，然后根据用户的许可有选择地呈现它们。如果特定用户确实尝试伪造对他们无权访问的应用程序部分的请求(无论如何都会实现)，这里的任何安全漏洞都将由服务器端访问控制来处理以锁定端点。

我在这里处于 Guzzle 之下，觉得我对这件事的大部分想法都想得太多了。如果有任何反馈，我将不胜感激。谢谢。

Answer 1

可以将基于权限的 JS 包发送给客户端。您可以利用 webpack 动态导入逻辑来仅加载所需的功能 JS 包。

您需要根据功能创建目录结构并根据用户权限加载它们。基本上 webpack 所做的是，它为每个功能创建单独的包，并在请求时通过动态导入加载它。

解决方法在这里👇

注意:您可能在 codesandbox.io 网络面板中看不到延迟包，但是，您可以下载项目并在本地运行服务器以查看延迟加载的包。