Wie implementiert man authentifizierte Routen in React Router 4?

Verwalten authentifizierter Routen in React Router 4

React Router 4 führt Änderungen ein, die die einfache Implementierung authentifizierter Routen mit dem herkömmlichen Ansatz verhindern. Um dieses Problem zu beheben, untersuchen wir eine alternative Lösung.

Fehler aufgetreten:

In Ihrer ersten Implementierung haben Sie versucht, zu verwenden. und gleichzeitig, was jetzt in React Router 4 verboten ist.

Vorgeschlagener Ansatz:

Um diesen Fehler zu beheben, können wir die Funktion verwenden. Komponente in Verbindung mit einem benutzerdefinierten Komponente. Die Die Komponente wird bedingt basierend auf der authentifizierten Requisite gerendert und zeigt entweder die gewünschte Route an oder leitet zu einer Anmeldeseite weiter, wenn der Benutzer nicht authentifiziert ist.

PrivateRoute-Komponente:

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

Aktualisierte Routen:

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

Aktionen in der render()-Methode verteilen:

Ihre Bedenken bezüglich der Verteilung von Aktionen in der render() )-Methode ist gültig. Generell wird davon abgeraten, da es zu potenziellen Nebenwirkungen und Leistungsproblemen führen kann. Stattdessen sollten Sie Aktionen in Lebenszyklusmethoden wie „componentDidMount“ auslösen oder die Statusverwaltungstools von React wie Redux oder Context API verwenden.

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