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

Question

我有以下代码，它很简单并且可以完成工作。但这是否存在安全问题？这是我第一次进行基于 Angular 色的授权，因此尝试了解我可以做得更好。

<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 方法更加复杂，并且可能有些过分，但您现在可以将每个 Angular 色放入其中。并将其扩展以了解多个 Angular 色(例如 ADMIN 和 VIEW_ORDERS，如果您想要这种级别的安全性)。

<小时/>

所有这些都与其他一样安全。这是 Javascript，发生在客户端，你对此无能为力。更重要的是，您选择一个易于开发人员实现/理解的解决方案。原因是安全性越容易实现，您就越频繁地实现它。

那么真正的安全性在哪里？简单:服务器端。想象一下，您破解了一些 JavaScript，并让它向您显示一个管理页面，但服务器从未向其提供实际内容。相当没用。您还可以根据当前用户在服务器端创建安全检查。

一个有点标准的方法是让投票者(小函数)每个测试两件事:

• 用户可以添加/查看/编辑/删除此类项目(一般情况下)吗？例如。尝试编辑用户时，用户是否具有 EDIT_USER 权限？或者尝试查看订单时显示 VIEW_ORDER？
• 用户可以添加/查看/编辑/删除此特定项目吗？例如。如果您只能更改属于您自己的订单，那么它实际上是您的吗？