Javascript React路由器与认证

我是一个新的反应和学习如何反应路由器实现路由。作为我的示例应用程序的一部分，我试图在作为站点一部分的每个路径上放置一个验证器。我遵循这个例子：

下面是我的示例代码：

  render(
  <Router history={browserHistory}>
    <Route path="/" component={App} onEnter={requireAuth}>
      <IndexRoute component={Home}/>
      <Route path="login" component={Login}/>
      <Route path="logout" component={Logout}/>
      <Route path="about" component={About}/>
      <Route path="inbox" component={Inbox}/>
    </Route>
  </Router>,
  document.getElementById("app"));

我所做的与示例所做的不同之处在于，示例仅将auth功能放在一个路由（仪表板）上，而我希望将其放在每个路由上。但该示例停止工作并开始抛出错误

超过最大调用堆栈大小

我认为这样做是正确的，因为/login是/requireAuth的子例程，因为requireAuth重定向到子路由，它只是再次尝试身份验证，并一直尝试。我可能错过了一个简单的解决方法，但我无法找到最好的方法

---

如何在站点的每个级别启用身份验证？

您可以更改路由，以便无需身份验证即可呈现不需要登录的页面，如下所示：

render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="login" component={Login}/>
      <Route path="logout" component={Logout}/>
      <Route path="about" component={About}/>
      <Route path="inbox" component={Inbox} onEnter={requireAuth}/>
    </Route>
  </Router>,
  document.getElementById("app"));

渲染(
,
document.getElementById（“app”）；

---

如果用户已经登录到

requireAuth

中，则不会执行任何操作，并且会呈现您的收件箱组件。

对于@DemoUser的回答几乎正确，@KumarM如果您需要通过身份验证才能查看登录页面，您如何登录？这是你能做的

render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>
      <Route path="logout" component={Logout}/>
      <Route path="/dashboard" onEnter={requireAuth} >
       <IndexRoute component={Home}/>
       <Route path="about" component={About}/>
       <Route path="inbox" component={Inbox} />
     </Route>
    </Route>
  </Router>,
  document.getElementById("app"));

渲染(
,
document.getElementById（“app”）；

这里发生了什么事

登录和注销页面不需要进行身份验证

仪表板的所有子组件将自动进行身份验证

---

我想你现在一定已经明白了，但我今天偶然发现了这个，所以我想分享一下：

如果您坚持保护应用程序的所有资源，我建议您三思。@abhirathore2006所说的是：应用程序的用户不应该通过身份验证才能访问登录组件。应该吗

假设“最大调用堆栈大小增加”是因为发生了无限重定向，这是正确的，您可以尝试通过执行空检查或其他方法来避免它

关键是，您只需要将onEnter钩子放在/logout、/inbox和/about组件上，并保持/login不变。否则，您可以尝试将这些组件包装在一个HOC中，或者使用更新的react-router4方法来获得所需的内容

希望这有帮助

---

干杯

谢谢，我在示例中也看到了这一点。但正如我在问题中提到的，我希望在访问每个路由之前对其进行身份验证。因此，需要在每个路径上启用它（试图避免在登录以外的每一条路径上显式地放置Onter方法）。我很乐意接受这一回答，但是正如我前面提到的，我不想在中间创建另一条路径，只是为了达到我需要的。如果您仍然想这样做，那么您可以根据当前路径尝试使用if条件并返回组件，但这不是一个好方法

render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>
      <Route path="logout" component={Logout}/>
      <Route path="/dashboard" onEnter={requireAuth} >
       <IndexRoute component={Home}/>
       <Route path="about" component={About}/>
       <Route path="inbox" component={Inbox} />
     </Route>
    </Route>
  </Router>,
  document.getElementById("app"));