如何使用 React.js 和 Node.js 仅将所需资源加载到客户端浏览器

Question

我将在前端使用 react.js 构建一个非常大的 基于 SPA 的 ERP SaaS，它具有非常复杂的基于角色和权限的系统。我已经对我的应用程序进行了一些分析，因此我意识到我必须为我的应用程序建立一个适当的架构，这样我就不应该后悔和担心我的应用程序及其未来的可扩展性。主要是我担心角色和基地管理。我需要在第一次加载时在不同组件之间切换。

我在这个项目上使用的后端：Php 和 node.js

我的确切问题： 我的系统中有大约 500 多个权限和 100 多个角色。某些角色仅获得 1 到 10 个权限。这导致在前端的客户端浏览器中切换并显示该权限的唯一组件。我的主要问题是为什么要在用户无权访问的客户端浏览器中加载不需要的组件？

问题示例： 管理员在他们的系统中只向 Mr.John 授予了 3 个权限。其中系统总共包含 100 个权限。每个权限都会导致切换和查看 100 个父组件。如果 Mr.John 只有 3 个权限，应该只切换 3 个父组件，那么为什么要将其他组件发送到客户端浏览器？

我想做什么？

身份验证后，我想在后端验证该用户的权限和角色，并仅将所需的资源发送给客户端。所以我的应用程序大小取决于特定用户的角色和权限。

为了解决这个问题我的想法（不确定）：

在这个项目之前，我有一个类似的 PHP 项目，没有使用任何复杂的前端库。在开发阶段真的很容易。我曾使用过 React 和 Vue。但我从未使用过服务器端渲染。我认为 SSR 的概念可以帮助我，所以我查阅了大量资源并了解了 SSR。 （不过，我不确定 SSR 的概念是否能帮到我。）

请帮助我做出正确的决定？

Answer 1

我对您的问题的理解是浏览器如何根据角色和权限而不是所有文件加载确切的文件。

代码拆分正是您想要的。这不仅适用于 React，而且适用于所有前端框架（或库），使用 webpack

阅读官方文章

• https://reactjs.org/docs/code-splitting.html
• https://webpack.js.org/guides/code-splitting/

也许 entry point 的 bundle(webpack) 必须很简单。获得角色和权限后，浏览器必须加载您想要的组件。另外，也许react-router 可以帮助你。或者，如果您考虑服务器端渲染，next.js 适合您