Wie implementiert man die Authentifizierung in React Router 4?

Authentifizierung von Routen in React Router 4

In React Router 4 erfordert die Implementierung authentifizierter Routen einen anderen Ansatz als in früheren Versionen. Die traditionelle Methode mit verschachtelten Routen mit und wird nicht mehr unterstützt.

Um dieses Problem zu beheben, können wir eine benutzerdefinierte Komponente:

<code class="javascript">import React, {PropTypes} from "react";
import { Route } from "react-router-dom";

export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin();
      return null;
    }

    return <Route {...this.props} />;
  }
}

AuthenticatedRoute.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired,
  component: PropTypes.element,
  redirectToLogin: PropTypes.func.isRequired,
};</code>

Diese Komponente prüft, ob der Benutzer angemeldet ist und leitet ihn andernfalls zur Anmeldeseite weiter. Wenn der Benutzer angemeldet ist, wird die Route wie gewohnt gerendert.

Ein anderer Ansatz besteht darin, die Funktion zu verwenden. Komponente. Dadurch können Sie den Benutzer basierend auf einer bestimmten Bedingung, z. B. dem Authentifizierungsstatus, bedingt umleiten:

<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 Mit der Komponente können Sie bestimmte Routen basierend auf der authentifizierten Requisite schützen. Wenn der Benutzer authentifiziert ist, kann er auf die Route zugreifen; andernfalls werden sie zur Anmeldeseite weitergeleitet.

Durch die Implementierung dieser Authentifizierungstechniken können Sie Routen in React Router 4 effektiv schützen und sicherstellen, dass nur autorisierte Benutzer Zugriff auf bestimmte Teile Ihrer Anwendung haben.

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