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

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>

每一个的复杂性和可用性各不相同，它们都有自己的 benefits/drawback。如果 "only one case may match"，该开关很有用。 && 方法有利于快速编码，但会导致硬编码速度非常快，难以维护。 RoleVoter 方法更复杂，可能有点矫枉过正，但您现在可以将每个角色都放入其中。并扩展它以了解多个角色（例如 ADMIN 和 VIEW_ORDERS，如果您想要那种级别的安全性）。

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

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

一个有点标准的方法是让选民（小函数）每个测试两件事：

用户可以add/view/edit/delete这种类型的项目（一般来说）吗？例如。尝试编辑用户时用户是否具有 EDIT_USER 权限？或者在尝试查看订单时出现 VIEW_ORDER？
用户可以add/view/edit/delete这个特定项目吗？例如。如果您只能更改自己的订单，那么它真的是您的吗？

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

When doing role based routing in react, is use of switch statement and showing different component based on role a security issue?

javascript

reactjs

react-router-dom