Comment implémenter l'authentification dans React Router 4 ?

Authentification des routes dans React Router 4

Dans React Router 4, la mise en œuvre de routes authentifiées nécessite une approche différente de celle des versions précédentes. La méthode traditionnelle utilisant des itinéraires imbriqués avec le et n'est plus pris en charge.

Pour résoudre ce problème, nous pouvons utiliser un composant :

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

Ce composant vérifie si l'utilisateur est connecté et le redirige vers la page de connexion sinon. Si l'utilisateur est connecté, il affiche l'itinéraire comme d'habitude.

Une autre approche consiste à utiliser l'option composant. Cela vous permet de rediriger l'utilisateur de manière conditionnelle en fonction d'une condition donnée, telle que le statut d'authentification :

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

Ce Le composant vous permet de protéger des itinéraires spécifiques en fonction de l'accessoire authentifié. Si l'utilisateur est authentifié, il peut accéder à l'itinéraire ; sinon, ils sont redirigés vers la page de connexion.

En mettant en œuvre ces techniques d'authentification, vous pouvez protéger efficacement les routes dans React Router 4 et garantir que seuls les utilisateurs autorisés ont accès à des parties spécifiques de votre application.

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!