Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:routage [2025/09/25 14:07] – [Routes publiques et privées] paolofront:routage [2025/09/29 10:25] (Version actuelle) – [Routes publiques et privées] paolo
Ligne 3: Ligne 3:
 Documentation [React-router-dom](https://reactrouter.com/home) Documentation [React-router-dom](https://reactrouter.com/home)
  
-**React-router-dom** est la lib la plus utilisée pour gérer le routage dans une application React. Elle met à disposition des composants permettant d'afficher des pages sans recharger l'application (**Single Page Application**) selon l'url ainsi que des hooks facilitant son utilisation. +**React-router-dom** est la lib la plus utilisée pour gérer le routage dans une application React. Elle met à disposition des composants permettant d'afficher des pages sans recharger l'application (**Single Page Application**) selon l'url ainsi que des hooks facilitant son utilisation 
 +.
 ### Mettre en place un router ### Mettre en place un router
  
-Voyons ce qu'on peut faire avec notre page **Login**.+Voyons ce que nous pouvons faire avec notre page **Login**:
  
-On rajoute un dossier ''Router'' et son ''index.jsx'' dans ''components/app'' par exemple.+  * Nous rajoutons un dossier ''Router'' et son ''index.jsx'' par exemple.
  
 ``` ```
-import { Login } from "../pages/Login"; +// src/components/app/Router/index.jsx 
-import { Error404 } from "../pages/Error404";+ 
 +import { Login } from "../../pages/Login"; 
 +import { Error404 } from "../../pages/Error404";
  
 export const Router = () => { export const Router = () => {
Ligne 27: Ligne 29:
 ``` ```
  
-On a ajouté au passage une page **Error404** sur ''*'' pour intercepter tout autre chemin.+Nous avons complété notre **Router** en rajoutant une page **Error404** sur ''*'' pour intercepter tout autre chemin.
  
-On remplace notre composant ''<Login />'' par ''<Router />''.+  * Nous remplaçons notre composant ''<Login />'' par ''<Router />''.
  
 ``` ```
 +// src/App.jsx
 +
 import { Router } from "./components/app/Router"; import { Router } from "./components/app/Router";
  
Ligne 41: Ligne 45:
 ``` ```
  
-Et voilà notre application possède un router !+Et voilà notre application possède un router  
 +!
 ### Routes publiques et privées ### Routes publiques et privées
  
 Dans la plupart des applications, il est nécessaire de distinguer les routes publiques accessibles à tout utilisateur, des routes privées qui nécessitent une authentification. Dans la plupart des applications, il est nécessaire de distinguer les routes publiques accessibles à tout utilisateur, des routes privées qui nécessitent une authentification.
  
-Comment fait-on ? Surprise ! On crée deux nouveaux composants: **PublicRoutes** et **PrivatesRoutes**.+Comment fait-on ? Surprise ! On crée deux nouveaux composants: ''PublicRoutes'' et ''PrivatesRoutes''.
  
 ``` ```
 +// src/components/app/Router/PublicRoutes/index.jsx
 +
 import { Outlet, Navigate } from "react-router-dom"; import { Outlet, Navigate } from "react-router-dom";
 +import { useSelector } from "react-redux";
  
 export const PublicRoutes = () => { export const PublicRoutes = () => {
-    const user = localStorage.getItem("user") ?? sessionStorage.getItem("user");+    const isAuthentified = true;
          
-    return user ? <Navigate to="/" : <Outlet />;        +    return isAuthentified ? <Navigate to="/" : <Outlet />;        
 }; };
 ``` ```
 ``` ```
 +// src/components/app/Router/PrivateRoutes/index.jsx
 +
 import { Outlet, Navigate } from "react-router-dom"; import { Outlet, Navigate } from "react-router-dom";
 +import { useSelector } from "react-redux";
  
 export const PrivateRoutes = () => { export const PrivateRoutes = () => {
-    const user = localStorage.getItem("user") ?? sessionStorage.getItem("user");+    const isAuthentified = true;
          
-    return user ? <Outlet /> : <Navigate to="/login" />;        +    return isAuthentified ? <Outlet /> : <Navigate to="/login" />;        
 }; };
 ``` ```
-Dans ces deux composants, on pose une condition qui influe sur l'affichage. ''<Outlet />'' est l'équivalent du prop **children** pour les composants classiques et représente le contenu de la balise. ''<Navigate />'' modifie le chemin.+Dans ces deux composants, nous posons une condition qui influe sur l'affichage. ''<Outlet />'' est l'équivalent du prop ''children'' des composants classiques (mais pour les routes), et représente le contenu de la balise. ''<Navigate />'' modifie le chemin.
  
-Pour résumer, si il y a un utilisateur authentifié (stocké en local ou session), **PublicRoutes** redirige vers un chemin privée (ici ''"/"''), sinon affiche son contenu (page **Login** par exemple).+Pour résumer, si l'utilisateur est authentifié, ''PublicRoutes'' redirige vers un chemin privée (ici ''"/"''), sinon affiche son contenu (page **Login** par exemple).
  
-A l'inverse, PrivateRoutes affiche son contenu (page **Home** par exemple) si authentifié et redirige vers un chemin publique (ici ''"/login"'').+A l'inverse, PrivateRoutes affiche son contenu (page **Home** par exemple) si authentifié et redirige vers un chemin publique (ici ''"/login"'') dans le cas contraire.
 ``` ```
 +// src/components/app/Router/index.jsx
 +
 import { Login } from "../../pages/Login"; import { Login } from "../../pages/Login";
 import { Home } from "../../pages/Home"; import { Home } from "../../pages/Home";
Ligne 96: Ligne 109:
 ``` ```
  
-On a ajouté au passage une page **Home** histoire d'avoir une route privée.+Nous avons complété notre **Router** en rajoutant une page **Home**. 
 + 
 +Vous pouvez essayer de définir ''isAuthentified'' à ''false'' et ''true'' pour tester. 
 + 
 +On ne traite ici que des routes publiques et privées mais on utiliserait le même système si l'on souhaité rajouter un autre type de route comme les routes d'admin par exemple.