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>
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!