本文介绍了反应从react-router路由上做登陆验证控制的方法,分享给大家,具体如下:
<强>验证代码
从“反应”进口的反应
从“react-redux”进口{连接};
函数requireAuthentication(组件){//组件有已登陆的模块直接返回(防止从新渲染)
如果(Component.AuthenticatedComponent) {
返回Component.AuthenticatedComponent
}//创建验证组件
类AuthenticatedComponent延伸反应。组件{
静态contextTypes={
路由器:React.PropTypes.object.isRequired,
}
状态={
登录:没错,
}
componentWillMount () {
this.checkAuth ();
}
componentWillReceiveProps (nextProps) {
this.checkAuth ();
}
checkAuth () {//判断登陆
const牌=this.props.token;
const登录令牌=& # 63;令牌。登录:空;//未登陆重定向到登陆页面
如果登录(!){
让=this.props.location重定向。路径名+ this.props.location.search;
this.context.router.push('/登录# 63;消息=401,redirect_uri=' + encodeURIComponent(重定向));
返回;
}
this.setState({登录});
}
呈现(){
如果(this.state.login) {
返回& lt;组件{……this.props}/比;
}
回报”
}
}//不使用react-redux的话直接返回//组件。AuthenticatedComponent=AuthenticatedComponent//返回Component.AuthenticatedComponent
函数mapStateToProps(状态){
返回{
令牌:state.token,
};
}
函数mapDispatchToProps(调度){
返回{};
}
组件。AuthenticatedComponent=连接(mapStateToProps mapDispatchToProps) (AuthenticatedComponent);
返回Component.AuthenticatedComponent
}
之前
<>强路由上使用
& lt;路由器历史={browserHistory}比;
& lt;路由路径="/admin”组件={requireAuthentication (AdminComponent)}/比;
& lt;/Router>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
