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 à cette route spécifique. Par exemple, votre application peut exiger que seuls les utilisateurs connectés puissent visiter la page du tableau de bord.
Dans ce tutoriel, vous allez apprendre comment 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.
Mise en route
Pour commencer, utilisez créer-réagir-application pour démarrer une simple application React.
npx créer-réagir-app protéger-routes-réagirNaviguez jusqu'au dossier qui vient d'être créé et démarrez votre application.
cd protect-routes-react
début npmOuvrez votre dossier d'application avec votre éditeur de texte préféré et nettoyez-le. Votre app.js devrait ressembler à ceci.
fonction App {
retour ;
}
exporter l'application par défaut ;Vous êtes maintenant prêt à configurer les itinéraires.
Configuration du routeur React
Vous utiliserez React Router pour configurer la navigation de votre application.
Installerréagir-routeur-dom.
npm installez réagir-routeur-domPour 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.
En Navbar.js, utilisez Lien composant de réagir-routeur-dom pour créer les liens de navigation vers différents chemins.
const { Lien } = require"react-router-dom";
barre de navigation const = => {
retour
;
};
exporter la barre de navigation par défaut ;En app.js créer les itinéraires correspondant aux liens dans le menu de navigation.
importer {BrowserRouter as Router, Routes, Route} from "react-router-dom" ;
importer la barre de navigation depuis "./Navbar" ;
importer la maison depuis "./Home" ;
importer le profil depuis "./Profile" ;
importer A propos de "./About" ;
fonction App {
retour
;
}
exporter l'application par défaut ;Vous devez maintenant créer les composants que vous avez référencés dans App.js.
En Accueil.js:
const Accueil = => {
retour Page d'accueil
;
};
exporter l'accueil par défaut ;En Profil.js
const Profil = => {
return Page de profil
;
};
exporter le profil par défaut ;En À propos de.js
const A propos = => {
return À propos de la page
;
};
exporter par défaut À propos ;Création d'itinéraires protégés dans React
La prochaine étape consiste à créer des itinéraires protégés. Le domicile et environ les itinéraires sont publics, ce qui signifie que tout le monde peut y accéder, mais l'itinéraire 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.
Configuration d'une fausse authentification
Puisque ce n'est pas un tutoriel d'authentification, vous utiliserez React hook d'utilisation de l'état pour simuler un système de connexion.
En App.js, ajouter ce qui suit.
importer {Routes, Route, BrowserRouter} depuis "react-router-dom" ;
importer { useState } de "réagir" ;
// Autres déclarations d'importation
fonction App {
const [isLoggedIn, setisLoggedIn] = useStatenull;
const connexion = => {
setisLoggedIntrue;
} ;
const déconnexion = => {
setisLoggedInfalse;
} ;
retour
{est connecté ?
:
}
;
}
exporter l'application par défaut ;Ici, vous suivez l'état 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 rendus 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 sur vrai et à son tour l'affichage de la connexion au bouton de déconnexion.
Protéger les composants privés
Pour protéger les routes, les composants privés doivent également avoir accès au est connecté valeur. Vous pouvez le faire en créant un nouveau composant qui accepte le est connecté état en tant qu'accessoire et le composant privé en tant qu'enfant.
Par exemple, si votre nouveau composant est nommé "Protégé", vous rendriez un composant privé comme celui-ci.
Le composant protégé vérifiera siest connecté est vrai ou faux. Si c'est vrai, il ira de l'avant et renverra le composant privé. Si c'est faux, il redirigera l'utilisateur vers une page où il pourra se connecter.
En savoir plus sur les autres moyens 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.
importer { Naviguer } depuis "react-router-dom" ;
const Protected = { isLoggedIn, children } => {
si !est connecté {
return
}
retour des enfants ;
};
exporter par défaut protégé ;Dans ce composant, l'instruction if est utilisée pour vérifier si l'utilisateur est authentifié. Si ce n'est pas le cas, 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.
Utilisez Protégé.js dans App.js modifier le Profil itinéraire des pages.
chemin="/profil"
élément={
}
/> App.js devrait ressembler à ceci.
importer {Routes, Route, BrowserRouter} depuis "react-router-dom" ;
importer { useState } de "réagir" ;
importer la barre de navigation depuis "./Navbar" ;
importer Protégé de "./Protégé" ;
importer la maison depuis "./Home" ;
importer A propos de "./About" ;
importer le profil depuis "./Profile" ;
fonction App {
const [isLoggedIn, setisLoggedIn] = useStatenull;
const connexion = => {
setisLoggedIntrue;
} ;
const déconnexion = => {
setisLoggedInfalse;
} ;
retour
{est connecté ?
:
}
é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 de naviguer vers 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 tutoriel vous a montré comment vous pouvez 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 avoir une page dire unpage d'analyse qui n'accorde l'accès qu'aux administrateurs. Ici, vous devrez ajouter une logique dans le composant protégé qui vérifie si un utilisateur remplit les conditions requises.
