React 路由器和身份验证

Question

我是 react 新手，正在学习如何 react-router 来实现路由。作为我的示例应用程序的一部分，我试图在网站的每条路径上放置一个身份验证器。我正在关注这个例子：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}
    });
  }
}

我所做的与示例所做的区别在于，该示例仅将身份验证功能放在一条路线（仪表板）上，而我想将其放在每条路线上。但是示例停止工作并开始抛出错误

超过最大调用堆栈大小

我认为是正确的，因为 /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"));

这里发生了什么？

1. 登录和注销页面无需认证
2. Dashboard 的所有子组件都将自动进行身份验证

Answer 2

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

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

您认为“最大调用堆栈大小增加”是由于发生了无限重定向是正确的，您可以尝试通过进行空检查或其他方式来避免它。

关键是，您只需将 onEnter 钩子放在 /logout、/inbox 和 /about 组件上，并保持 /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 不做任何事情，并且你的收件箱组件被渲染。