React从react-router路由上做登陆验证控制的方法
本文介绍了React从react-router路由上做登陆验证控制的方法,分享给大家,具体如下:
验证代码
importReactfrom'react' import{connect}from'react-redux'; functionrequireAuthentication(Component){ //组件有已登陆的模块直接返回(防止从新渲染) if(Component.AuthenticatedComponent){ returnComponent.AuthenticatedComponent } //创建验证组件 classAuthenticatedComponentextendsReact.Component{ staticcontextTypes={ router:React.PropTypes.object.isRequired, } state={ login:true, } componentWillMount(){ this.checkAuth(); } componentWillReceiveProps(nextProps){ this.checkAuth(); } checkAuth(){ //判断登陆 consttoken=this.props.token; constlogin=token?token.login:null; //未登陆重定向到登陆页面 if(!login){ letredirect=this.props.location.pathname+this.props.location.search; this.context.router.push('/login?message=401&redirect_uri='+encodeURIComponent(redirect)); return; } this.setState({login}); } render(){ if(this.state.login){ return} return'' } } //不使用react-redux的话直接返回 //Component.AuthenticatedComponent=AuthenticatedComponent //returnComponent.AuthenticatedComponent functionmapStateToProps(state){ return{ token:state.token, }; } functionmapDispatchToProps(dispatch){ return{}; } Component.AuthenticatedComponent=connect(mapStateToProps,mapDispatchToProps)(AuthenticatedComponent); returnComponent.AuthenticatedComponent }
路由上使用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。