使用react并具有多个角色来构建一个宁静的Web应用程序

Question

我正在创建一个需要100％稳定的单页Web应用程序（第一次这样做）。 因此，我很难决定如何使用react呈现多个角色的UI。

将有一个普通用户和一个管理员，登录/认证后，服务器将重定向到主应用程序页面，并且将有一个菜单。 事情是，管理菜单应该有一个额外的选项，所以我在考虑应该解决这个问题。

我应该有两个不同的文件进行重定向（user.html / admin.html）吗？ 缺点是我可能会有一些重复的代码，因为其中一个捆绑包将拥有另一个捆绑包所拥有的一切，以及一个额外的组件。

还是默认不设置任何组件的组件，然后如果它是管理员，它将显示自身？ 缺点是，如果用户具有一些JS知识，他就可以搜索代码并查看管理员可以做什么（当然，服务器中将进行身份验证以防止实际发生任何事情）。

我也在考虑通过json获取菜单列表，当我单击多余的选项时，它将获得包含应该显示的组件的脚本，然后我以某种方式对结果进行ReactDOM.render（甚至不知道如果可能的话，也许我在想）。 我也听说过一个React-Router，但是没有找到足够的信息，也许这就是我所需要的？

有关如何正确完成此操作的任何想法/示例都将非常有帮助。 提前致谢。

Answer 1

绝对不要重复您的代码。 首先，我会问，是否有一个真正的问题知道管理员的能力如何 ？ 我个人不会为此担心。

React Router将用于客户端路由，如果您要使用适当的React应用，则肯定要使用客户端路由。 本质上，您仅将服务器用于初始App路由，然后再进行API调用。

当然，可以将参数传递回给按钮组件。 您的道具可以包含一个'buttonList'属性，该属性具有呈现该按钮所需的所有参数...但是，只有在该按钮的操作很简单的情况下，这才是真正可行的混淆，并且就管理功能而言。 编写一个可以通过参数传入细节的通用组件（肯定可以从服务器传入）绝对是实现此目的的React方法。

但是，您到底需要对用户隐藏什么以及它的重要性决定了这是否真的足够。