Comment React implémente-t-il le contrôle de vérification de connexion dans le routage React-Router ?

Cette fois, je vais vous montrer comment React implémente le contrôle de vérification de connexion dans le routage React-Router Quelles sont les précautions pour que React implémente le contrôle de vérification de connexion dans le routage React-Router, comme suit C'est un cas pratique, jetons-y un coup d'œil.

Code de vérification

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
}

Utilisé sur le routage

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

Je crois que vous le maîtrisez après avoir lu le Cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Résumé des méthodes de saut de routage React

Explication détaillée de la gestion du routage React et de l'utilisation de React Router

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!