Les routes protégées sont des routes dont l’accès est réservé aux utilisateurs autorisés. Cela signifie que les utilisateurs doivent d’abord remplir certaines conditions avant d’accéder à cette route spécifique. Ceci est essentiel pour sécuriser certaines routes ou informations. Il existe différentes façons d’utiliser les routes protégées dans React. L’une d’entre elles consiste à utiliser un composant d’ordre supérieur qui enveloppe une route protégée et vérifie si un utilisateur est authentifié avant de rendre un composant.
Création d’une application React
Avant de créer la route protégée, vous devez créer une application React.
Exécutez la commande ci-dessous pour utiliser l’outil de commande create-react-app pour amorcer l’application.
npx create-react-app protect-routes-react
Le site create-react-app La commande créera un dossier nommé protéger-routes-réagir contenant tous les fichiers et paquets nécessaires pour démarrer.
Naviguez dans le dossier et exécutez npm start pour démarrer l’application.
cd protect-routes-react
npm start
Ouvrez votre dossier d’application avec votre éditeur de texte préféré et modifiez App.js afin qu’il ne contienne que le code suivant.
function App() {
return <div></div>;
}
export default App;
Vous êtes maintenant prêt à configurer les routes.
Configuration du routeur React
Exécutez la commande npm ci-dessous dans le terminal pour installer react-router-dom.
npm install react-router-dom
Dans cette application, vous allez créer 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).
- Page « À propos » (publique, donc accessible à tous).
Pour commencer, créez un composant nommé Navbar.js. Ce composant contiendra les liens de navigation vers les trois pages.
Dans ce fichier, importez le composant Lien composant de react-router-dom et ajoutez les liens.
const { Link } = require("react-router-dom");
const Navbar = () => {
return (
<nav style={{ textAlign: "center", marginTop: "20px" }}>
<Link to="https://www.makeuseof.com/" style={{ padding: "10px" }}>
Home
</Link>
<Link to="/profile" style={{ padding: "10px" }}>
Profile
</Link>
<Link to="/about" style={{ padding: "10px" }}>
About
</Link>
</nav>
);
};
export default Navbar;
Après avoir créé les liens, créez les routes correspondantes dans le fichier App.js.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Navbar";
import Home from "./Home";
import Profile from "./Profile";
import About from "./About";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="https://www.makeuseof.com/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;
Ensuite, créez les composants que vous avez référencés dans la section App.js.
Sur Home.js ajoutez le code suivant pour créer la page d’accueil.
const Home = () => {
return <h1>Home page</h1>;
};
export default Home;
Sur Profile.js ajoutez le code suivant pour créer la page de profil.
const Profile = () => {
return <h1 style={{ textAlign: "center" }}>Profile Page</h1>;
};
export default Profile;
Enfin, dans About.jsajoutez le code suivant pour créer la page « About ».
const About = () => {
return <h1 style={{ textAlign: "center" }}>About page</h1>;
};
export default About;
Une fois que vous avez créé les pages, vous pouvez maintenant créer les routes protégées.
Création de routes protégées en React
Le site /home et /à propos Les routes sont des routes publiques, ce qui signifie que tout le monde peut y accéder, mais seuls les utilisateurs authentifiés peuvent accéder à la route du profil. Vous devez donc trouver un moyen de vous connecter en tant qu’utilisateur.
Configuration de la fausse authentification
Comme il ne s’agit pas d’un tutoriel sur l’authentification, vous utiliserez React useState hook pour simuler un système de connexion.
Dans App.js, ajoutez ce qui suit.
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
<em>// Other import stamements</em>
function App() {
const [isLoggedIn, setisLoggedIn] = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (
<BrowserRouter>
<Navbar />
{isLoggedIn ? (
<button onClick={logOut}>Logout</button>
) : (
<button onClick={logIn}>Login</button>
)}
<Routes>
</Routes>
</BrowserRouter>
);
}
export default App;
Ici, vous suivez le statut de connexion de l’utilisateur en utilisant l’état. Vous avez deux boutons, le bouton de connexion et le bouton de déconnexion. Ces boutons sont rendus tour à tour selon que l’utilisateur est connecté ou non.
Si l’utilisateur est déconnecté, le bouton de connexion est affiché. Un clic sur ce bouton déclenche la fonction de connexion qui met à jour l’écran de l’utilisateur. isLoggedIn état à vrai et à son tour l’affichage de la connexion au bouton de déconnexion.
Protection des composants privés
Pour protéger les itinéraires, les composants privés doivent également avoir accès à l’espace de travail de l isLoggedIn valeur. Vous pouvez créer un nouveau composant qui accepte la valeur isLoggedIn en tant que propriété et le composant privé en tant qu’enfant.
Par exemple, si votre nouveau composant s’appelle Protégévous rendez un composant privé en l’enveloppant comme ceci :
<Protected isLoggedIn={isLoggedIn}>
<Private />
</Protected>
Le site Protégé vérifiera si isLoggedIn est vrai ou faux. Si c’est vrai, il renverra l’adresse de l’utilisateur. Privé composant. S’il est faux, il redirigera l’utilisateur vers une page où il pourra se connecter.
Apprenez-en plus sur les autres moyens que vous pouvez utiliser pour rendre un composant en fonction des conditions à partir de cet article sur le rendu conditionnel dans React.
Dans votre application, créez un fichier nommé Protégé.js et ajoutez le code suivant.
import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
if (!isLoggedIn) {
return <Navigate to="https://www.makeuseof.com/" replace />;
}
return children;
};
export default Protected;
Dans ce composant, l’instruction if est utilisée pour vérifier si l’utilisateur est authentifié. S’il ne l’est pas, Naviguer à partir de react-router-dom les redirige vers la page d’accueil. Cependant, si l’utilisateur est authentifié, le composant rend les enfants.
Pour protéger le Profil l’envelopper avec le Protégé route et passage dans le isLoggedIn état en tant que prop.
<Route
path="/profile"
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>
Le composant App devrait maintenant ressembler à ceci.
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
import Navbar from "./Navbar";
import Protected from "./Protected";
import Home from "./Home";
import About from "./About";
import Profile from "./Profile";
function App() {
const [isLoggedIn, setisLoggedIn] = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (
<BrowserRouter>
<div>
<Navbar />
{isLoggedIn ? (
<button onClick={logOut}>Logout</button>
) : (
<button onClick={logIn}>Login</button>
)}
<Routes>
<Route path="https://www.makeuseof.com/" element={<Home />} />
<Route path='/profile'
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>
<Route path ='/about' element={<About />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
C’est tout pour la création de routes protégées. Vous pouvez maintenant accéder à la page de profil uniquement si vous êtes connecté. Si vous essayez de naviguer vers la page de profil sans vous connecter, vous serez redirigé vers la page d’accueil.
Contrôle d’accès basé sur les rôles
Les routes protégées dans React vous permettent de restreindre l’accès des utilisateurs non authentifiés à une page. C’est très basique et dans certains cas, vous pouvez avoir besoin d’aller encore plus loin et de restreindre les utilisateurs en fonction de leurs rôles. Par exemple, vous pouvez avoir une page, par exemple une page d’analyse, qui ne donne accès qu’aux administrateurs. Dans ce cas, vous devrez ajouter une logique dans le champ Protégé pour vérifier si un utilisateur doit accéder à cette route en fonction de son rôle.
