Wie implementiert man authentifiziertes Routing in React Router 4?

Authentifiziertes Routing in React Router 4

Authentifizierte Routen in React Router 4 erfordern einen anderen Ansatz als in früheren Versionen. React Router 4 unterstützt keine verschachtelten Routen mehr mit Komponenten- und untergeordneten Requisiten, was die Implementierung authentifizierter Routen schwieriger macht.

Lösung: Verwendung von Redirect Component

Um authentifizierte Routen zu implementieren Routen können Sie die Redirect-Komponente verwenden. Die Redirect-Komponente leitet den Benutzer basierend auf einer bestimmten Bedingung auf einen anderen Pfad um.

Betrachten Sie die folgende PrivateRoute-Komponente:

<code class="javascript">function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}</code>

Diese Komponente rendert die angegebene Komponente, wenn der Benutzer authentifiziert ist (Anthed). === wahr); Andernfalls wird der Benutzer zur Anmeldeseite weitergeleitet.

Verwendung:

Jetzt können Sie die PrivateRoute-Komponente in Ihren Routen wie folgt verwenden:

<code class="javascript"><Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} /></code>

In diesem Beispiel leitet die PrivateRoute für die Dashboard-Route nicht authentifizierte Benutzer zur Anmeldeseite weiter.

Alternative Lösung: Aktionen versenden

Ein weiterer Ansatz, der Möglicherweise ist es weniger wünschenswert, eine Aktion in der Rendermethode Ihrer AuthenticatedRoute-Komponente auszulösen. Dies könnte wie folgt aussehen:

<code class="javascript">export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin()
      return null
    }
    return <Route {...this.props} />
  }
}</code>

Dieser Ansatz löst eine Weiterleitung zur Anmeldeseite aus, wenn der Benutzer nicht angemeldet ist, wirkt jedoch möglicherweise weniger elegant als die Verwendung der Redirect-Komponente.

Das obige ist der detaillierte Inhalt vonWie implementiert man authentifiziertes Routing in React Router 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!