React / Redux / Router客户端登录凭据 - 受限页面

Question

我是React / Redux / Router的新手，很想知道是否可以这样做：

if (user.loggedIn) {
  // redirect to '/dashboard'
} else {
  // redirect to '/'
}

我想限制dashboard访问current user。如果我将www.mysite.com/dashboard复制到另一个浏览器，它将重定向到www.mysite.com/。

理想情况下，user.loggedIn州将被确定为客户端。

怎么做？

Answer 1

考虑到user.loggedIn在客户端可用，这可以通过使用路由器的简单重定向来实现。

<Route exact path="/" render={() => (
  user.loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <HomePage />
  )
)}/>

请参考https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md

Answer 2

您可以使用许多不同的模式来实现此目的。我会考虑以下几点：

• 将服务于路由器的组件连接到Redux存储。
• 将名为prop的isLoggedIn映射到您的Redux商店中的state.auth.user != null或类似物。
• 有条件地服务于基于此道具的/或/Dashboard路线。
• 要在用户状态容器中初始设置用户，您需要根据应用程序编写认证流程。