Question

我是新的反应和学习如何反应 - 路由器实现路由。作为我的示例应用程序的一部分，我试图在每个路径上放置一个身份验证器，它是网站的一部分。我跟随此示例：https://github.com/reactjs/react-router/blob/master/examples/auth-flow/app.js

这是我的示例代码：

  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"));

这就是requireAuth所做的：

function requireAuth(nextState, replace) {
  if(!auth.isUserLoggedIn()) {
    replace({
      path: "/login",
      state: {nextPathname: nextState.location.pathname}
    });
  }
}

我所做的和示例之间的区别在于，该示例仅将auth功能放在一条路线（仪表板）上，我希望将其放在每条路线上。但是该示例停止工作并开始抛出错误说＆＃34;最大调用堆栈大小超出＆＃34;我认为是正确的，因为/ login是/的子路由，因为requireAuth重定向到子路由，它只是尝试再次进行身份验证并继续尝试。我可能在这里错过了一个简单的修复方法，但是我无法确定最佳方法。如何在网站的每个级别启用身份验证？

Answer 1

@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"));

这里发生了什么？

登录和注销页面无需进行身份验证
仪表板的所有子组件将自动进行身份验证

Answer 2

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

如果您坚持保护应用程序的每个资源，我建议您三思而后行。 @ abhirathore2006所说的是：不应对您的应用程序的用户进行身份验证以访问登录组件。他们应该吗？

你认为'最大调用堆栈大小增加'是因为无限重定向发生是正确的，你可以尝试通过空检查或其他东西来避免它。

关键是，您只需将onEnter挂钩放在/ logout，/ inbox＆amp; /关于组件并保持/ login原样。否则，您可以尝试将这些组件包装在HOC中，或使用较新的react-router4方法来获取所需的内容。

希望这有帮助！

干杯！

Answer 3

您可以更改路线，以便可以在不需要身份验证的情况下呈现不需要登录的页面，如下所示：

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"));

如果用户已登录requireAuth没有执行任何操作，则会呈现您的收件箱组件。

反应路由器和身份验证

3 个答案: