Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Kontrollschritte zur Anmeldeüberprüfung für React from React-Router Route

Ausführliche Erläuterung der Kontrollschritte zur Anmeldeüberprüfung für React from React-Router Route

php中世界最好的语言
php中世界最好的语言Original
2018-05-22 11:22:532908Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der Schritte zur Anmeldeüberprüfungskontrolle von React über die React-Router--Route und die Vorsichtsmaßnahmen für React zur Durchführung der Anmeldeüberprüfungskontrolle geben Schauen wir uns die folgenden praktischen Fälle aus der React-Router-Route an.

Bestätigungscode

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
}

Wird beim Routing verwendet

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Artikel, mehr Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

React Routing Management Detaillierte Erläuterung der Schritte zur Verwendung von React Router

Analyse von Vue.js Download-Methode und Verwendungsschritte

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Kontrollschritte zur Anmeldeüberprüfung für React from React-Router Route. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn