Javascript 在将组件传输并运送到客户端之前，根据每个组件的权限控制绑定组件 我正在开发一个包含asp.net核心的web应用程序 我正在开发React组件，用ES和JSX语法编写所有组件 我运行webpack来传输我所有的代码（所以现在我已经准备好了预传输的文件） 当收到请求时，我只提供预先传送的包裹

我希望有一种只捆绑和发送特定于用户的组件（基于他们可以访问的功能列表）到客户端的方法

我能想到的唯一方法是“动态权限控制的组件绑定结合动态jsx编译”来为我的组件提供服务

我认为webpack不应该像这样作为一个即时捆绑包使用，所以这是不可能的

我提出的部分零碎解决方案：

在我的js中没有使用导入或导出机制，我使用Razor循环浏览我的功能列表，在页面中添加适当的（主要是模块化的）组件，我称之为“依赖性优先顺序”，在每个组件的代码末尾，我写下

类ComponentA扩展了React.Component{//此处的组件代码}

window.ComponentA=组件a

因此，所有组件都是全局的，可以进行渲染。 通过这种方式，我可以选择使用Razor将哪些组件发送到客户端。 还记得我说的“大部分是模块化的”吗？如果我在用户无权访问的另一个组件中渲染一个组件，那么这个局部解决方案会将render语句嵌入到渲染子组件本身的主组件中，而不存在它应该渲染的组件代码。这是一个肮脏的部分解决方案，如果组件不存在，我会抑制错误并继续

归根结底我很难让我的react组件100%模块化，并且能够控制我的“组件依赖项”的粒度，因此客户端上没有用户无权访问的代码

有人给了我一个荒谬的解决方案：

当然，我也不可能为每个用户生成一组捆绑包，每当管理员更改用户的访问权限时，我都会用webpack重新呈现该捆绑包。（特别是因为我在这里与成千上万的用户打交道）。 当我写下这一切的时候，我越来越觉得自己只是一个完美主义者，应该按照上面的段落去做

我应该选择的解决方案：

有一种理念是，只需将所有js发送到浏览器，然后根据用户的权限有选择地呈现它们。如果某个特定用户试图伪造对他们无权访问的应用程序部分的请求（不管如何都会实现），这里的任何安全漏洞都将由服务器端访问控制来处理，以锁定端点

---

我在枪口下，感觉我想得太多了。如果有任何反馈，我将不胜感激。谢谢。

可以将基于权限的JS捆绑包发送到客户端。您可以利用

webpack

动态导入逻辑仅加载所需的功能

您需要根据功能创建目录结构，并根据用户权限加载它们。基本上，

webpack

所做的是，它为每个功能创建单独的包，并在请求时通过动态导入加载

---

此处引用此内容的解决方案：

const allowedFeatures=features.slice（0,2）由于js文件本身是动态的，我如何将其插入js文件本身？您可以进行API调用，获取允许的功能列表，并将其存储在
allowedFeatures
状态变量中，然后使用它加载捆绑包。或者你可以在登陆HTML的JS变量中发送用户权限元数据，在你的组件中读取并使用它。这些都在服务器端吗？对不起，我想我遗漏了什么。我不一定要在服务器端呈现组件本身：您基本上在构建期间为所有功能生成捆绑包（
webpack
遍历JS文件的
/features index/
文件夹，并为每个文件创建捆绑包）。客户机：从服务器获取用户权限配置，在其中循环，将功能名称传递给动态导入函数
webpack
自动加载在服务器中创建的功能JS包并呈现它。所以，基本上您只加载用户有权访问的JS特性包。在此阅读有关动态导入的更多信息-默认情况下，不会将所有组件代码发送到客户端。客户端可以根据权限控制加载它想要的组件代码。您是否可以下载project并在本地运行服务器，更改并检查
allowedFeatures
阵列，以便在每次更改
allowedFeatures
时看到不同的捆绑包被延迟加载（检查网络面板）。