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

本文介绍了React从react-router路由上做登陆验证控制的方法，分享给大家，具体如下：

验证代码

import React from 'react'import {connect} from 'react-redux';function requireAuthentication(Component) { // 组件有已登陆的模块 直接返回 (防止从新渲染) if (Component.AuthenticatedComponent) {  return Component.AuthenticatedComponent } // 创建验证组件 class AuthenticatedComponent extends React.Component {  static contextTypes = {   router: React.PropTypes.object.isRequired,  }  state = {   login: true,  }  componentWillMount() {   this.checkAuth();  }  componentWillReceiveProps(nextProps) {   this.checkAuth();  }  checkAuth() {   // 判断登陆   const token = this.props.token;   const login = token ? token.login : null;   // 未登陆重定向到登陆页面   if (!login) {    let redirect = 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 <Component {...this.props}/>   }   return ''  } } // 不使用 react-redux 的话直接返回 // Component.AuthenticatedComponent = AuthenticatedComponent // return Component.AuthenticatedComponent function mapStateToProps(state) {  return {   token: state.token,  }; } function mapDispatchToProps(dispatch) {  return {}; } Component.AuthenticatedComponent = connect(mapStateToProps, mapDispatchToProps)(AuthenticatedComponent); return Component.AuthenticatedComponent}

路由上使用

<Router history={browserHistory}> <Route path="/admin" component={requireAuthentication(AdminComponent)} /></Router>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持错新站长站。