React Router:处理角色身份验证

Posted

技术标签:

【中文标题】React Router:处理角色身份验证【英文标题】:React Router: Handling role authentication 【发布时间】:2017-02-14 10:46:06 【问题描述】:

我正在开发一个具有多个角色的网络应用程序。我有一个想法,我可以使用 React Router 通过 onEnter 触发器限制对某些路由的访问。

现在我想知道这是否是防止访问未经授权的页面的可靠方法。基本上,破解它有多容易?破解它不应该太容易,仅此而已。

请记住,所有正在加载的资源仍然存在服务器端身份验证,因此即使用户确实违反了 React 路由器,也不会返回未经授权的数据。

  <Route path="/" component=App>
    <IndexRoute onEnter=authenticateUser />
    <Route path="login" component=LoginPage />
    <Route path=roles.ADMIN.homeRoute component=Admin onEnter=authenticateAdmin>
      <IndexRoute component=DashboardPage />
    </Route>
    <Route path=roles.OPERATIONS.homeRoute component=Operations onEnter=authenticateOperations>
      <IndexRoute component=DashboardPage />
    </Route>
  </Route>

目前角色路由仅填充仪表板,但想法是每个角色路由将包含多个子路由。使用此配置,我希望我可以在输入受限角色路由时验证用户角色的身份,然后能够在子路由之间导航,而无需在每次路由更改时进行身份验证。

【问题讨论】:

【参考方案1】:

这就像修改缓存角色的状态一样简单。只要您对每个资源都有服务器端身份验证,这不是问题。如果有的话,他们可能会看到组件的布局,但看不到数据。

【讨论】:

是的,所有敏感资源都需要身份验证令牌,所以你是对的,恶意用户可以做到的最好的办法就是查看组件的布局。感谢您的回复!

以上是关于React Router:处理角色身份验证的主要内容,如果未能解决你的问题,请参考以下文章

React Router - 身份验证后重定向延迟

使用React Router v6 进行身份验证完全指南

我的自定义身份验证 react-router 路由有啥问题?

使用 react-router-v4 对路由执行身份验证

React Router 用户角色的最佳实践 (Firebase)

如何在React Router 4中实现经过身份验证的路由?