Question

我在以下身份验证模式中使用react-router rc6：

const isLoggedIn = false

function requireAuth (nextState, replaceState) {
  console.log(nextState.location.pathname)
  if(!isLoggedIn) {
    replaceState({ nextPathName: nextState.location.pathname }, '/login')
  }
}

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path='/' component={Main} onEnter={requireAuth}>
      <Route path='login' component={Login} />
    </Route>
  </Router>
), document.getElementById('app'));

我已经将此视为常见模式，但根据https://github.com/rackt/react-router/issues/2773，我无法在onEnter挂钩中重定向，因为上面的函数requireAuth在无限循环中被调用。我应该怎么做呢？如果未经过身份验证，我想重定向到/login页面。

Answer 1

这是因为/ onEnter处理程序尝试重定向到执行相同/ onEvent处理程序的路由。

即。会发生什么：

路由器尝试处理/的请求（/login的首次匹配）。
/有一个onEnter处理程序。处理程序已执行。
处理程序想要导航到/login。
路由器尝试处理/的请求（返回步骤1）。

正如您所看到的，您获得调用堆栈超出错误的原因是因为它是循环的。

尝试将路线更改为以下内容：

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path='/' component={Main}>
      <Route path='/login' component={Login} />
      <Route path='/user' onEnter={requireAuth}>
        <Route path='/profile' component={Profile}>
      </Route>
    </Route>
  </Router>
), document.getElementById('app'));

这样，只有需要身份验证的路由才会受到requireAuth处理程序的保护。

如果您想为React提供简单的身份验证解决方案，请查看我已构建的React SDK Stormpath。

它将照顾所有这一切。而不是必须使用hacky onEnter处理程序，您需要做的就是使用SDK AuthenticatedRoute。 E.g。

<Router history={createBrowserHistory()}>
  <HomeRoute path='/' component={MasterPage}>
    <IndexRoute component={IndexPage} />
    <LoginRoute path='/login' component={LoginPage} />
    <LogoutRoute path='/logout' />
    <Route path='/verify' component={VerifyEmailPage} />
    <Route path='/register' component={RegisterPage} />
    <Route path='/forgot' component={ResetPasswordPage} />
    <AuthenticatedRoute>
      <HomeRoute path='/profile' component={ProfilePage} />
    </AuthenticatedRoute>
  </HomeRoute>
</Router>

上面的示例是从React SDK example project中提取的真实示例。请参阅：https://github.com/stormpath/stormpath-express-react-example/blob/master/src/app.js#L11-L23。

如果这有助于你，请告诉我。

在auth模式下使用react-router时，超出了调用堆栈

1 个答案: