实施客户端 ReactJS 权限或将应用程序分解为多个文件？

Question

TL;DR: 通过客户端权限限制访问，或者将应用程序分解成单独的文件并限制对每个文件的访问？

我正在使用 ReactJS（与 React Router 等）创建许多小型客户端应用程序。它们将被现场工作人员使用，而无需在它们之间进行太多切换。

我正在使用 Symfony2 作为后端。我已经在此处设置了服务器呈现的权限 apps/pages。

到目前为止，我的所有用户（React 应用程序）都需要相同的权限，所以我只限制了对主页面的访问权限 app.js 文件（当然还有 API ）。但现在我需要能够对某些用户隐藏其中一些应用程序。在我看来，我有两个选择：

实施客户端权限系统，补充 Symfony2 服务器端方法
将我的 React 应用程序拆分成单独的捆绑文件，并只将适当的页面提供给正确的权限持有者

选项 1 会给项目增加很多复杂性，我什至不知道我该如何开始，因为教程的方式不多。（顺便说一句，虽然不太可能，但如果用户检查客户端代码并闯入受保护区域并不重要，因为底层数据通过 API 受到保护。）但这意味着单一代码-base 和更好的缓存，因为所有供应商代码（例如 React 本身）只会下载一次。

选项 2 意味着我可以避免完全创建客户端权限系统，它会使每个应用程序更简单，并巧妙地适应我现有的服务器端权限系统。但是，它的灵活性会低得多，并且意味着由于文件很多而多次提供相同的供应商代码。

我应该采用哪种方法？

Answer 1

关于您的评论，决定 show/not 根据他的权限级别显示组件的一个简单解决方案是创建一个包装组件。

...

let DumbPermissionLevel = ({userLevel, levelRequired, children}) => {
    if (userLevel < levelRequired)
        return null;
    return children;
};

let PermissionLevel = connect(
    (state) => ({
        userLevel: state.user.permissionLevel // Wherever your user permission level is stocked in your state
    })
)(DumbPermissionLevel);

...

然后您可以像这样简单地使用它：

const LARVA = 0;
const MODERATOR = 1;
const ADMIN = 2;
...
<p>Everybody will see this.</p>

<PermissionLevel levelRequired={MODERATOR}>
    <p>Only moderators and admin will see this !</p>
</PermissionLevel>

<PermissionLevel levelRequired={ADMIN}>
    <p>Only admins will see this !</p>
</PermissionLevel>

当然，这意味着您将用户权限级别从后端服务器传输到客户端代码。
看看 createStore() 第二个参数。

实施客户端 ReactJS 权限或将应用程序分解为多个文件？

Implement client-side ReactJS permissions or break apps up into multiple files?

permissions

client-side

reactjs