我已登录组件,该组件应该可供未经身份验证的用户使用。在身份验证之后,此组件应该变得不可用。
var routes = (
<Route handler={App}>
<Route name="signIn" handler={signIn}/>
{/* redirect, if user is already authenticated */}
{ localStorage.userToken ? (
<Redirect from="signIn" to="/user"/>
) : null
}
</Route>
);
Router.run(routes, (Handler, state) => {
React.render(<Handler {...state}/>, document.getElementById('main'));
});
如果用户在身份验证后出于任何原因重新加载了webapp,则此代码非常有用,但当然如果用户没有重新加载webapp则不会。
我已经尝试使用this.context.router.transitionTo
权限来使用SignUp组件,但它工作得很糟糕 - 组件被渲染,然后这个脚本就会被执行。
所以我想将重定向添加到routes变量中,以使路由器重定向,甚至不用尝试渲染组件。
答案 0 :(得分:23)
我建议采用另一种方法,而不是检查你的auth-flow并有条件地渲染特定的路线:
如果您正在使用react-router 0.13.x,我建议您在需要检查身份验证时使用组件上的willTransitionTo methods。当处理程序即将渲染时调用它,使您有机会中止或重定向转换(在这种情况下,检查用户是否经过身份验证,如果没有,则重定向到另一个路径)。请参阅此处的auth-flow示例:https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js
对于版本&gt; 0.13.x,它将是onEnter和Enterhooks。请参阅此处的auth-flow示例:https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js
基本上,您将身份验证流程从routes
变量移开,转移到转换事件/挂钩中。在路由处理程序实际呈现之前,请检查auth,并将用户重定向到另一个路由。