我是新来反应和学习如何作出反应 - 路由器实现路由。作为我的示例应用程序的一部分,我试图在每个作为网站一部分的路径上添加一个身份验证器。我下面这个例子: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重定向到子路由,它只是尝试再次验证,并继续尝试永远。我可能在这里错过了一个简单的解决方法来实现这个目标,但我无法确定什么是最好的方法。我能做些什么来在网站的每个级别启用身份验证?
谢谢,我也看到了这个例子。但正如我在我的问题中提到的那样,我想让每条路径都可以在访问之前进行身份验证。因此,需要在每条路线上启用它(试图避免明确地将onEnter方法放在登录以外的每个路线上)。 – KumarM