Question

我有以下代码，简单易行。但是这有安全性问题吗？这是我第一次进行基于角色的授权，因此试图了解我可以做得更好。

<Route path={"/"} component={RootPage}></Route>

export default const RootPage({role}) => {
    switch(role) {
        case USER: return <MainPageUser />
        case ADMIN: return <AdminPage />
        default: return <MainPage />
    }
}

Answer 1

您可以选择几个选项，所有这些选项（几乎）和另一个（不）安全一样。它是javascript，如果有人愿意，可以在客户端更改它。

您可以按照自己的方式进行切换，或类似的操作

{role==="admin" && <AdminStuff />} // the component only gets rendered if the first part is true
{role==="user"  && <UserStuff />}  // so in this case it's one or the other.

您还可以创建一个称为选民的组件：

function RoleVoter({grantedRole, requiredRole, children){
    render(){
        return grantedRole===requiredRole ? children : null;
    }
}
// Example:
<RoleVoter grantedRole={role} requiredRole={ADMIN}> <AdminStuff/> </RoleVoter>

每种产品的复杂性和可用性各不相同，它们都有其优点/缺点。如果“只有一种情况可以匹配”，则此开关很有用。 &&方法适用于快速编码，但会导致非常快速的硬编码，难以维护。 RoleVoter的方法较为复杂，可能过于矫kill过正，但是您现在可以在其中添加所需的每个角色。并扩展它以了解多种角色（例如，如果您想要那种安全级别，则为ADMIN和VIEW_ORDERS）。

所有这些都和另一种一样安全。它是Javascript，发生在客户端，您对此无能为力。更重要的是，您选择了易于开发人员实施/理解的解决方案。这样做的原因是，实施安全性越容易，实施它的频率就越高。

那么真正的安全性在哪里？简单：服务器端。想象一下，您入侵了一些JavaScript，并获得了向您显示管理页面的信息，但是服务器从未向其提供实际的内容。真没用。您还可以基于当前用户在服务器端创建安全检查。

一种比较标准的方法是让选民（小功能）分别测试两件事：

用户可以添加/查看/编辑/删除这种类型的项目吗？例如。尝试编辑用户时，该用户是否具有EDIT_USER权限？还是尝试查看订单时使用VIEW_ORDER？
用户可以添加/查看/编辑/删除此特定项目吗？例如。如果您只能在自己的订单上更改订单，那实际上是您的订单吗？

当在响应中进行基于角色的路由时，使用switch语句并根据角色显示不同的组件是否是安全问题？

1 个答案: