Guide complet d'authentification avec React Router v6

Huawei Cloud 2022-05-14 11:32:19 阅读数:339

guidecompletauthentificationavecreact

React Router v6- Oui.ReactUne bibliothèque de routage populaire et puissante pour les applications.Il offre unDéclaratif、Une approche de routage basée sur les composants,EtÇa marche.URLParamètres、Tâches communes telles que la redirection et le chargement des données.

Cette dernière version deReact RouterBeaucoup de nouveaux concepts ont été introduits,Par exemple,<Outlet />EtlayoutRoutage de la disposition,Mais la documentation pertinente est encore rare.

Cet article montrera comment utiliserReact Router v6Créer une route protégée et comment ajouter l'authentification.

C'est parti.

Ouvrir le terminal,Lancez la commande suivante pour créer un nouveau React Projets:

> npx create-react-app ReactRouterAuthDemo> cd ReactRouterAuthDemo

Et puis...,In React Installé dans l'application React Router En tant que dépendance:

> npm install react-router-dom

Une fois React Router Dépendances installées,On peut commencer à éditersrc/index.jsDocumentation.

Tout d'abord,,De react-router-dom Importer BrowserRouterComponents,Et utiliser<BrowserRouter /> Le paquet <App /> Components,Comme ça.:

import { StrictMode } from "react";import { createRoot } from "react-dom/client";import { BrowserRouter } from "react-router-dom";import App from "./App";const rootElement = document.getElementById("root");const root = createRoot(rootElement);root.render( <StrictMode> <BrowserRouter> <App /> </BrowserRouter> </StrictMode>);

Routage de base

React RouterOffre <Routes /> Et <Route /> Components, Permet de rendre les composants en fonction de leur emplacement actuel .

import { Routes, Route } from "react-router-dom";import { LoginPage } from "./pages/Login";import { HomePage } from "./pages/Home";import "./styles.css";export default function App() { return ( <Routes> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<LoginPage />} /> </Routes> );}

<Route />

<Route /> Les applications et React Cartographie des chemins entre les composants .Par exemple,Lorsque l'utilisateur navigue vers/loginHeure,Pour rendreLoginPageComponents, Nous avons juste besoin d'offrir comme ça <Route />:

<Route path="/login" element={<LoginPage />} />

<Route /> Le composant peut être considéré comme un if Déclarations, Seulement si l'élément correspond au chemin spécifié , C'est pour ça que URLEmplacement.

<Routes />

<Routes /> Les composants sont: React Router v5Dans <Switch /> Remplacement des composants .

Nous pouvons créerLogin.jsxEtHome.jsxPour utiliser <Routes />

// Login.jsxexport const LoginPage = () => ( <div> <h1>This is the Login Page</h1> </div>);// Home.jsxexport const HomePage = () => ( <div> <h1>This is the Home Page</h1> </div>);

Et puis..., Nous allons lancer la commande suivante pour démarrer l'application :

> npm run start

Dans le navigateur, Par défaut, nous verrons HomeComponents.Si nous utilisons/loginRoutage,Nous verronsLoginPage Les composants sont présentés à l'écran .

Ou, On peut aussi utiliser un JavaScriptObjet,AdoptionuseRoutes Crochet pour représenter le routage dans l'application . C'est une façon fonctionnelle de définir le routage ,Son mode de fonctionnement est compatible avec< routes />Et<Route />Même composant.

import { useRoutes } from "react-router-dom";// ...export default function App() { const routes = useRoutes([ { path: "/", element: <HomePage /> }, { path: "/login", element: <LoginPage /> } ]); return routes;}

Maintenant que la configuration de base est terminée , Voyons comment créer un routage protégé , Cela empêche les utilisateurs non authentifiés d'accéder à certains contenus de l'application .

Créer une route protégée

Avant de créer une route protégée , Commençons par créer un crochet personnalisé ,Il utiliseraContext APIEtuseContext Le crochet traite l'état des utilisateurs authentifiés .

import { createContext, useContext, useMemo } from "react";import { useNavigate } from "react-router-dom";import { useLocalStorage } from "./useLocalStorage";const AuthContext = createContext();export const AuthProvider = ({ children }) => { const [user, setUser] = useLocalStorage("user", null); const navigate = useNavigate(); // Lors de la vérification des droits de l'utilisateur , Accédez à cette fonction  const login = async (data) => { setUser(data); navigate("/profile"); }; // Déconnecter const logout = () => { setUser(null); navigate("/", { replace: true }); }; const value = useMemo( () => ({ user, login, logout }), [user] ); return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;};export const useAuth = () => { return useContext(AuthContext);};

Ci - dessus useAuth Dans le crochet, Nous avons exposé l'état de l'utilisateur et certaines méthodes utilisées pour se connecter et se déconnecter .Quand l'utilisateur se déconnecte,Nous utilisons React Router De useNavigate Le crochet les a Redirection Page d'accueil .

.Pour maintenir l'état de l'utilisateur lors de la mise à jour de la page ,Nous utiliserons useLocalStorage Crochet, Il synchronisera les valeurs d'état dans le stockage local du navigateur .

import { useState } from "react";export const useLocalStorage = (keyName, defaultValue) => { const [storedValue, setStoredValue] = useState(() => { try { const value = window.localStorage.getItem(keyName); if (value) { return JSON.parse(value); } else { window.localStorage.setItem(keyName, JSON.stringify(defaultValue)); return defaultValue; } } catch (err) { return defaultValue; } }); const setValue = (newValue) => { try { window.localStorage.setItem(keyName, JSON.stringify(newValue)); } catch (err) {} setStoredValue(newValue); }; return [storedValue, setValue];};

<ProtectedRoute /> Les composants seront useAuth Vérifier l'état de l'utilisateur actuel dans le crochet , Si l'utilisateur n'est pas authentifié ,Rediriger vers/Chemin.

import { Navigate } from "react-router-dom";import { useAuth } from "../hooks/useAuth";export const ProtectedRoute = ({ children }) => { const { user } = useAuth(); if (!user) { // user is not authenticated return <Navigate to="/" />; } return children;};

Pour rediriger l'utilisateur ,Nous utilisons <Navigate /> Components. Lorsque le composant parent rend sa position actuelle ,<Navigate /> Le composant change la position actuelle .Il est utilisé en interne usenavate Crochet.

In App.js Dans le document,Nous pouvons utiliser <ProtectedRoute /> Emballage des composantspage Components.Par exemple, ci - dessous,Nous utilisons <ProtectedRoute /> Emballage<SettingsPage /> Et <ProfilePage /> Components.Maintenant, Lorsqu'un utilisateur non authentifié tente d'accéder à /profile Ou /settings Sur le chemin, Ils seront redirigés vers la page d'accueil .

import { Routes, Route } from "react-router-dom";import { LoginPage } from "./pages/Login";import { HomePage } from "./pages/Home";import { SignUpPage } from "./pages/SignUp";import { ProfilePage } from "./pages/Profile";import { SettingsPage } from "./pages/Settings";import { ProtectedRoute } from "./components/ProtectedRoute";export default function App() { return ( <Routes> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/register" element={<SignUpPage />} /> <Route path="/profile" element={ <ProtectedRoute> <ProfilePage /> </ProtectedRoute> } /> <Route path="/settings" element={ <ProtectedRoute> <SettingsPage /> </ProtectedRoute> } /> </Routes> );}

Si le nombre de routes protégées est limité , La méthode ci - dessus fonctionne bien , Mais s'il y a plus d'une de ces routes , On doit tout emballer ,C'est compliqué..

Au contraire.,On peut utiliserReact Router v6De Propriétés de routage imbriquées , Encapsuler toutes les routes protégées en une seule disposition .

Utiliser des routes imbriquées et < Outlet />

React Router v6Moyenne Une des caractéristiques les plus puissantes est le routage imbriqué . Cette fonctionnalité nous permet d'avoir Routes contenant d'autres sous - routes . La plupart de nos plans sont URL Les fragments sont couplés ,React Router Tout à fait d'accord .

Par exemple,Nous pouvons<HomePage /> Et <LoginPage /> Ajouter un composant parent à la route <Route />,Comme ça.:

import { ProtectedLayout } from "./components/ProtectedLayout";import { HomeLayout } from "./components/HomeLayout";// ...export default function App() { return ( <Routes> <Route element={<HomeLayout />}> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<LoginPage />} /> </Route> <Route path="/dashboard" element={<ProtectedLayout />}> <Route path="profile" element={<ProfilePage />} /> <Route path="settings" element={<SettingsPage />} /> </Route> </Routes> );}

Composant parent <Route /> Il peut aussi y avoir un chemin , Il rend les sous - composants à l'écran <Route />.

Lorsque l'utilisateur navigue vers /dashboard/profile Heure, Le routeur va rendre <ProfilePage />.Pour y parvenir,, L'élément de routage parent doit avoir un <Outlet /> Composants pour rendre les éléments enfants .Outlet Les composants font imbriquer UI Visible lors du rendu des sous - routes .

L'élément de routage parent peut également avoir une logique d'affaires publique supplémentaire et une interface utilisateur .Par exemple,In<ProtectedLayout /> Dans le composant, .Nous avons inclus la logique de routage privée et une barre de navigation universelle , Quand le Sous - routage est rendu , Il sera visible .

import { Navigate, Outlet } from "react-router-dom";import { useAuth } from "../hooks/useAuth";export const ProtectedLayout = () => { const { user } = useAuth(); if (!user) { return <Navigate to="/" />; } return ( <div> <nav> <Link to="/settings">Settings</Link> <Link to="/profile">Profile</Link> </nav> <Outlet /> </div> )};

Sauf que<Outlet />Components,Nous avons également la possibilité d'utiliser useOutlet Crochet,Il fonctionne de la même façon:

import { Link, Navigate, useOutlet } from "react-router-dom";// ...export const ProtectedLayout = () => { const { user } = useAuth(); const outlet = useOutlet(); if (!user) { return <Navigate to="/" />; } return ( <div> <nav> <Link to="/settings">Settings</Link> <Link to="/profile">Profile</Link> </nav> {outlet} </div> );};

Similaire au routage protégé , Nous ne voulons pas que les utilisateurs authentifiés aient accès à /login Chemin.On y va. <HomeLayout /> Il est traité dans le composant :

import { Navigate, Outlet } from "react-router-dom";import { useAuth } from "../hooks/useAuth";export const HomeLayout = () => { const { user } = useAuth(); if (user) { return <Navigate to="/dashboard/profile" />; } return ( <div> <nav> <Link to="/">Home</Link> <Link to="/login">Login</Link> </nav> <Outlet /> </div> )};

Fin

Il vaut la peine de prendre du temps pour mieux comprendre React Router v6 Comment ça marche?, En particulier l'authentification de l'utilisateur .

Par rapport aux versions précédentes,React Router v6 C'est une grande amélioration .C'est rapide.、Stable、Fiable. En plus d'être plus facile à utiliser , Il a beaucoup de nouvelles caractéristiques ,Par exemple,<Outlets /> Et une amélioration <Route />Components, Cela simplifie considérablement React Routage dans l'application .

J'espère que ce guide vous aidera , J'aimerais que vous sachiez comment utiliser React Router v6 Meilleure compréhension du traitement de l'authentification des utilisateurs .

Copyright:Cet article est[Huawei Cloud]Établi,Veuillez apporter le lien original pour réimprimer,remercier。 https://fra.fheadline.com/2022/134/202205141131101369.html