本文介紹了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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。