如何使用 React.js 和 Node.js 仅将所需资源加载到客户端浏览器
How can I load only required resources to client browser with React.js and Node.js
我打算构建一个非常大的基于 SPA 的 ERP SaaS，前端 react.js 具有非常复杂的 基于角色和权限的系统。我对我的应用程序做了一些分析，所以我意识到我必须为我的应用程序建立一个合适的架构，这样我就不会后悔和担心我的应用程序及其未来的可扩展性。我主要担心角色和基础管理。我需要在第一次加载时在不同组件之间切换的地方。
我在这个项目中使用的后端：Php 和 node.js
我的确切问题：
我在我的系统中拥有大约 500 多个权限和 100 多个角色。某些角色仅获得 1 到 10 个权限。这导致在前端的客户端浏览器中切换并显示该权限的唯一组件。我的主要问题是 为什么我要在用户无权访问的客户端浏览器中加载不需要的组件？
问题示例： 管理员在他们的系统中仅授予 Mr.John 3 个权限。其中系统总共包含 100 个权限。每个权限都会导致切换和查看 100 个父组件。如果 Mr.John 只有 3 个权限，应该只切换 3 个父组件，那么为什么将其他组件发送到客户端浏览器？
我想做什么？
认证后，我想在后台验证该用户的权限和角色，只向客户端发送需要的资源。因此，我的应用程序大小取决于特定用户拥有的角色和权限。
解决这个问题我的想法是什么（不确定） :
在这个项目之前，我在 PHP 有一个类似的项目，没有使用任何复杂的前端库。在开发阶段真的很容易。我使用过 React 和 Vue。但我从未使用过服务器端渲染。我认为 SSR 的概念可以帮助我，所以我查阅了大量资源并了解了 SSR。 （不过，我不确定SSR的概念对我有帮助。）
请帮我做出正确的决定？
我对你的问题的理解是浏览器如何根据角色和权限加载确切的文件而不是所有文件。
代码拆分正是您想要的。这不仅适用于 React，适用于所有使用 webpack
的前端框架（或库）
阅读官方文章
也许 entry point 的 bundle(webpack) 一定很简单。获得角色和权限后，浏览器必须加载您想要的组件。另外，也许 react-router 对你有帮助。或者，如果您考虑服务器端渲染，next.js 适合您
我打算构建一个非常大的基于 SPA 的 ERP SaaS，前端 react.js 具有非常复杂的 基于角色和权限的系统。我对我的应用程序做了一些分析，所以我意识到我必须为我的应用程序建立一个合适的架构，这样我就不会后悔和担心我的应用程序及其未来的可扩展性。我主要担心角色和基础管理。我需要在第一次加载时在不同组件之间切换的地方。
我在这个项目中使用的后端：Php 和 node.js
我的确切问题： 我在我的系统中拥有大约 500 多个权限和 100 多个角色。某些角色仅获得 1 到 10 个权限。这导致在前端的客户端浏览器中切换并显示该权限的唯一组件。我的主要问题是 为什么我要在用户无权访问的客户端浏览器中加载不需要的组件？
问题示例： 管理员在他们的系统中仅授予 Mr.John 3 个权限。其中系统总共包含 100 个权限。每个权限都会导致切换和查看 100 个父组件。如果 Mr.John 只有 3 个权限，应该只切换 3 个父组件，那么为什么将其他组件发送到客户端浏览器？
我想做什么？
认证后，我想在后台验证该用户的权限和角色，只向客户端发送需要的资源。因此，我的应用程序大小取决于特定用户拥有的角色和权限。
解决这个问题我的想法是什么（不确定） :
在这个项目之前，我在 PHP 有一个类似的项目，没有使用任何复杂的前端库。在开发阶段真的很容易。我使用过 React 和 Vue。但我从未使用过服务器端渲染。我认为 SSR 的概念可以帮助我，所以我查阅了大量资源并了解了 SSR。 （不过，我不确定SSR的概念对我有帮助。）
请帮我做出正确的决定？
我对你的问题的理解是浏览器如何根据角色和权限加载确切的文件而不是所有文件。
代码拆分正是您想要的。这不仅适用于 React，适用于所有使用 webpack
的前端框架（或库）阅读官方文章
也许 entry point 的 bundle(webpack) 一定很简单。获得角色和权限后，浏览器必须加载您想要的组件。另外，也许 react-router 对你有帮助。或者，如果您考虑服务器端渲染，next.js 适合您