Les routes protégées sont les routes qui n'accordent l'accès qu'aux utilisateurs autorisés. Cela signifie que les utilisateurs doivent d'abord remplir certaines conditions avant d'accéder à cet itinéraire spécifique. Par exemple, votre application peut exiger que seuls les utilisateurs connectés puissent visiter la page du tableau de bord.

Dans ce didacticiel, vous allez apprendre à créer des routes protégées dans une application React.

Notez que vous utiliserez React Router v6, qui est un peu différent des versions précédentes.

Commencer

Pour commencer, utilisez créer-réagir-app pour démarrer une simple application React.

npx créer-réagir-app protéger-routes-réagir

Accédez au dossier qui vient d'être créé et démarrez votre application.

cd protect-routes-react
début npm

Ouvrez votre dossier d'application avec votre éditeur de texte préféré et nettoyez-le. Ton app.js devrait ressembler à ceci.

fonction App() {
 retourner ;
}
exporter l'application par défaut ;

Vous êtes maintenant prêt à configurer les itinéraires.

En rapport: Comment créer votre première application React avec JavaScript

Configuration du routeur React

Vous utiliserez React Router pour configurer la navigation de votre application.

Installer réagir-routeur-dom.

npm installer réagir-routeur-dom

Pour cette application, vous aurez trois pages principales :

• Page d'accueil (la page de destination).
• Page de profil (protégée, donc seuls les utilisateurs connectés y ont accès).
• À propos de la page (publique pour que tout le monde puisse y accéder).

Dans Navbar.js, Utilisez le Lien composant de réagir-routeur-dom pour créer les liens de navigation vers différents chemins.

const { Lien } = require("react-router-dom");
const Barre de navigation = () => {
 retourner (

 );
};
exporter la barre de navigation par défaut ;

Dans app.js créer les itinéraires correspondant aux liens dans le menu de navigation.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom" ;
importer la barre de navigation depuis "./Navbar" ;
importer la page d'accueil depuis "./Home" ;
importer le profil depuis "./Profile" ;
importer A propos de "./About" ;
fonction App() {
 retourner (



} />
} />
} />


 );
}
exporter l'application par défaut ;

Vous devez maintenant créer les composants que vous avez référencés dans UNEpp.js.

Dans Accueil.js:

const Accueil = () => {
 retourner 
Page d'accueil
;
};
exporter l'accueil par défaut ;

Dans Profil.js

Profil const = () => {
 retourner 
Page de profil
;
};
exporter le profil par défaut ;

Dans À propos.js

const À propos = () => {
 retourner 
À propos de la page
;
};
exporter par défaut À propos ;

Créer des itinéraires protégés dans React

La prochaine étape consiste à créer des itinéraires protégés. le domicile et sur les routes sont publiques, ce qui signifie que tout le monde peut y accéder, mais la route de profil nécessite que les utilisateurs soient d'abord authentifiés. Par conséquent, vous devez créer un moyen de connecter les utilisateurs.

Configurer une fausse authentification

Comme il ne s'agit pas d'un tutoriel d'authentification, vous utiliserez React crochet useState pour simuler un système de connexion.

Dans UNEpp.js, ajoutez ce qui suit.

import {Routes, Route, BrowserRouter} de "react-router-dom" ;
importer { useState } de "réagir" ;
// Autres instructions d'importation
fonction App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const connexion = () => {
 setisLoggedIn (true);
 };
 const déconnexion = () => {
 setisLoggedIn (false);
 };
 retourner (


 {est-il connecté? (
Se déconnecter
 ): (
Connexion
 )}



 );
}
exporter l'application par défaut ;

Ici, vous suivez le statut de connexion de l'utilisateur à l'aide de l'état. Vous avez deux boutons, le bouton de connexion et le bouton de déconnexion. Ces boutons sont affichés tour à tour selon qu'un utilisateur est connecté ou non.

Si l'utilisateur est déconnecté, le bouton de connexion s'affiche. Cliquer dessus déclenchera la fonction de connexion qui mettra à jour le est connecté état à vrai et à son tour l'affichage de la connexion au bouton de déconnexion.

En rapport: Qu'est-ce que l'authentification utilisateur et comment ça marche ?

Protection des composants privés

Pour protéger les routes, les composants privés doivent également avoir accès aux est connecté évaluer. Vous pouvez le faire en créant un nouveau composant qui accepte le est connecté l'état en tant que prop et le composant privé en tant qu'enfant.

Par exemple, si votre nouveau composant est nommé "Protected", vous rendrez un composant privé comme celui-ci.

Le composant protégé vérifiera si est connecté est vrai ou faux. Si c'est vrai, il ira de l'avant et renverra le composant privé. S'il est faux, il redirigera l'utilisateur vers une page où il pourra se connecter.

En savoir plus sur les autres façons que vous pouvez utiliser pour rendre un composant en fonction des conditions de cet article sur rendu conditionnel dans React.

Dans votre application, créez Protected.js.

import {Naviguer} de "react-router-dom" ;
const Protected = ({ isLoggedIn, children }) => {
 si (!est connecté) {
 retourner ;
 }
 retourner les enfants;
};
export par défaut Protégé ;

Dans ce composant, l'instruction if est utilisée pour vérifier si l'utilisateur est authentifié. S'ils ne le sont pas, Naviguer à partir de réagir-routeur-dom les redirige vers la page d'accueil. Cependant, si l'utilisateur est authentifié, le composant enfant est rendu.

Utiliser Protected.js dans UNEpp.js modifier le Profil parcours des pages.

 chemin="/profil"
 élément={



 }
/>

App.js devrait ressembler à ceci.

import {Routes, Route, BrowserRouter} de "react-router-dom" ;
importer { useState } de "réagir" ;
importer la barre de navigation depuis "./Navbar" ;
import Protégé de "./Protégé" ;
importer la page d'accueil depuis "./Home" ;
importer A propos de "./About" ;
importer le profil depuis "./Profile" ;
fonction App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const connexion = () => {
 setisLoggedIn (true);
 };
 const déconnexion = () => {
 setisLoggedIn (false);
 };
 retourner (




 {est-il connecté? (
Se déconnecter
 ): (
Connexion
 )}

} />
 élément={



 }
 />
} />





 );
}
exporter l'application par défaut ;

C'est tout sur la création d'itinéraires protégés. Vous ne pouvez désormais accéder à la page Profil que si vous êtes connecté. Si vous essayez d'accéder à la page Profil sans vous connecter, vous serez redirigé vers la page d'accueil.

Contrôle d'accès basé sur les rôles

Ce didacticiel vous a montré comment empêcher les utilisateurs non authentifiés d'accéder à une page dans une application React. Dans certains cas, vous devrez peut-être aller encore plus loin et restreindre les utilisateurs en fonction de leurs rôles. Par exemple, vous pouvez faire en sorte qu'une page dise une page d'analyse qui n'accorde l'accès qu'aux administrateurs. Ici, vous devrez ajouter une logique dans le composant Protected qui vérifie si un utilisateur remplit les conditions requises.

Comment implémenter le rendu conditionnel dans React.js (avec exemples)

Le rendu conditionnel est un moyen utile d'améliorer votre application. Voici une sélection de façons de l'utiliser.

Lire la suite

A propos de l'auteur