React从react-router路由上做登陆验证控制的方法

2023-09-13 00:47:05 63

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 }

React从react-router路由上做登陆验证控制的方法

热门推荐

随机推荐