2016-08-05 101 views
2

我是新来反应和学习如何作出反应 - 路由器实现路由。作为我的示例应用程序的一部分,我试图在每个作为网站一部分的路径上添加一个身份验证器。我下面这个例子: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功能放在一个路由(仪表板)上,因为我希望将它放在每条路由上。但这个例子停止工作,并开始抛出错误说:“最大调用堆栈大小超出”,我认为是正确的,因为/登录是/的子路由,因为requireAuth重定向到子路由,它只是尝试再次验证,并继续尝试永远。我可能在这里错过了一个简单的解决方法来实现这个目标,但我无法确定什么是最好的方法。我能做些什么来在网站的每个级别启用身份验证?

回答

0

你可以改变你的路线,这样,不需要登录的页面,可以无需认证的呈现,如:

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

如果用户已经的loggedIn requireAuth没有做任何事情,你的收件箱组件已呈现。

+0

谢谢,我也看到了这个例子。但正如我在我的问题中提到的那样,我想让每条路径都可以在访问之前进行身份验证。因此,需要在每条路线上启用它(试图避免明确地将onEnter方法放在登录以外的每个路线上)。 – KumarM

2

@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. 仪表板的所有子组件会自动进行身份验证
+0

我很乐意接受这个答案,但正如我上面提到的,我不想在中间创建另一条路径,以便获得我需要做的事情。 – KumarM

+0

有没有办法你可以把身份验证放在根目录下,如果你还想这样做的话,那么你可以试试如果条件取决于当前路径并返回组件,但这不是一个好方法 – abhirathore2006

1

我想你一定是想通了现在,但我今天这个偶然发现,所以我想分享一下:

如果你坚持保护你的应用程序的每个资源,我会建议你三思。 What @ abhirathore2006说的是:你的应用程序的用户不应该被认证来访问登录组件。他们应该吗?

如果您认为“最大调用堆栈大小增加”是因为无限重定向发生,并且您可以尝试通过执行空检查或其他操作来避免它,那么您是正确的。

问题是,您只需将onEnter挂钩放置在/ logout,/ inbox &/about组件上并保持原样。否则,您可以尝试将这些组件包装在HOC中,或者使用较新的react-router4方法来获得您所需的内容。

希望这会有所帮助!

干杯!

相关问题