React路由器和身份验证

React Router and Authentication

本文关键字：身份验证 路由器 React      更新时间：2023-09-26

我是反应和学习如何反应路由器来实现路由的新手。作为我的示例应用程序的一部分，我试图在网站的每个路径上都安装一个验证器。我以这个例子为例：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"));

以下是身份验证的要求：

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

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

超过的最大调用堆栈大小

我认为这是正确的，因为/login是/的子路由，而且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"));

这里发生了什么事？

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

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

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

您认为"最大调用堆栈大小增加"是因为发生了无限重定向，这是正确的，您可以通过执行null检查或其他操作来避免它。

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

希望这能有所帮助！

干杯！

您可以更改路由，这样，不需要登录的页面就可以在不需要身份验证的情况下呈现，如：

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中，则不执行任何操作，并且呈现收件箱组件。

相关文章：