Question

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

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

我使用Symfony2作为后端。我已经为服务器呈现的应用程序/页面设置了权限。

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

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

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

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

我应该采取哪种方法？

Answer 1

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

...

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权限或将应用程序分解为多个文件？

1 个答案: