Habituellement, lors de la création d'applications Web, les pages de connexion sont utilisées pour protéger les pages privées. Par exemple, pour une plateforme de blogs, le tableau de bord peut n'être accessible qu'aux utilisateurs authentifiés. Si un utilisateur non authentifié tente d'accéder à cette page, l'application le redirige vers la page de connexion. Une fois connectés, ils y ont accès.
Dans cet article, nous verrons comment vous pouvez rediriger un utilisateur d'une page restreinte vers une page de connexion. Nous discuterons également de la manière dont vous pouvez renvoyer l'utilisateur à la page sur laquelle il se trouvait après s'être connecté.
Dans React Router v6, vous pouvez utiliser deux méthodes pour rediriger un utilisateur: le composant Navigate et le composant useNavigate() accrocher.
Créer une application réactive
Créez une application React simple en utilisant le créer-réagir-app commande. Vous utiliserez cette application pour tester comment le composant Naviguer et le useNavigate() travail au crochet.
npx créer-réagir-app réagir-redirection
Créer une page de connexion
Vous devrez créer une page de connexion pour authentifier les utilisateurs. Comme il ne s'agit pas d'un didacticiel sur l'authentification, utilisez un tableau d'objets comme base de données utilisateur.
Créez un nouveau fichier dans le src dossier et nommez-le Connexion.js. Ajoutez ensuite le code suivant, pour créer le formulaire de connexion.
importer { useState } de "réagir";
importer Tableau de bord de "./Tableau de bord";
constante Connexion = () => {
const [nom d'utilisateur, setusername] = useState("");
const [mot de passe, setpassword] = useState("");
constante [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| faux));
const utilisateurs = [{ nom d'utilisateur: "Jeanne", le mot de passe: "mot de passe de test" }];
constante handleSubmit = (e) => {
e.preventDefault()
constante compte = utilisateurs.find((utilisateur) => utilisateur.nom d'utilisateur nom d'utilisateur);
si (compte && compte.mot de passe mot de passe) {
setauthenticated(vrai)
localStorage.setItem("authentifié", vrai);
}
};
revenir (
<div>
<p>Content de te revoir</p>
<formulaire onSubmit={handleSubmit}>
<saisir
taper="texte"
nom="Nom d'utilisateur"
valeur={nom d'utilisateur}
onChange={(e) => setusername (e.target.value)}
/>
<saisir
taper="le mot de passe"
nom="Mot de passe"
onChange={(e) => setpassword (e.target.value)}
/>
<type d'entrée="nous faire parvenir" valeur="Soumettre" />
</form>
</div>
)
};
}
exporterdéfaut Connexion;
Il s'agit d'un simple formulaire de connexion. Lorsqu'un utilisateur soumet son nom d'utilisateur et son mot de passe, ils sont vérifiés par rapport au tableau. Si ces informations sont correctes, l'état authentifié est défini sur vrai. Étant donné que vous vérifierez si l'utilisateur est authentifié dans le composant Dashboard, vous devez également stocker l'état d'authentification à un endroit accessible par d'autres composants. Cet article utilise le stockage local. Dans une application réelle, en utilisant Contexte de réaction serait un meilleur choix.
Créer une page de tableau de bord
Ajoutez le code suivant dans un nouveau fichier appelé Tableau de bord.js.
constante Tableau de bord = () => {
revenir (
<div>
<p>Bienvenue sur votre tableau de bord</p>
</div>
);
};
exporterdéfaut Tableau de bord;
Le tableau de bord ne doit être accessible qu'aux utilisateurs authentifiés. Par conséquent, lorsque les utilisateurs visitent la page du tableau de bord, vérifiez d'abord s'ils sont authentifiés. Si ce n'est pas le cas, redirigez-les vers la page de connexion.
Pour ce faire, configurez d'abord les routes d'application à l'aide du routeur React.
npm installer réagir-routeur-dom
Dans index.js, configurez le routage de votre application.
importer Réagir de "réagir";
importer RéagirDOM de "react-dom/client" ;
importer Application de "./Application" ;
importer { NavigateurRouteur, Itinéraire, Itinéraires } de "réagir-routeur-dom" ;
importer Connexion de "./Connexion";
importer Tableau de bord de "./Tableau de bord";
constante root = ReactDOM.createRoot(document.getElementById("racine"));
racine.rendre(
<Réagir. Mode strict>
<NavigateurRouteur>
<Itinéraires>
<Élément d'index de routage={<Application />} />
<Chemin d'accès ="connexion" élément={<Connexion />} />
<Chemin d'accès ="tableau de bord" élément={<Tableau de bord />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Protéger la page du tableau de bord
Maintenant que vos routes d'application sont configurées, l'étape suivante consiste à rendre la route du tableau de bord privée. Lors du chargement du composant Dashboard, l'état d'authentification est extrait du stockage local et stocké dans l'état. Si l'utilisateur n'est pas authentifié, l'application redirigera vers la page de connexion sinon elle affichera la page du tableau de bord.
importer { useEffect, useState } de "réagir";
constante Tableau de bord = () => {
constante [authenticated, setauthenticated] = useState(nul);
useEffet(() => {
const logInUser = localStorage.getItem("authentifié");
si (utilisateur connecté) {
setauthenticated (loggedInUser);
}
}, []);
si (!authenticated) {
// Rediriger
} autre {
revenir (
<div>
<p>Bienvenue sur votre tableau de bord</p>
</div>
);
}
};
exporterdéfaut Tableau de bord;
Rediriger l'utilisateur vers la page de connexion à l'aide de Naviguer
Le composant Navigate a remplacé le composant Redirect qui était utilisé dans React Router v5. Importer Naviguez à partir de react-router-dom.
importer { Naviguer } de "réagir-routeur-dom" ;
Pour rediriger les utilisateurs non authentifiés, utilisez-le comme suit.
si (!authenticated) {
revenir <Naviguez remplacer vers ="/login" />;
} autre {
revenir (
<div>
<p>Bienvenue sur votre tableau de bord</p>
</div>
);
}
Le composant Navigate est une API déclarative. Il s'appuie sur un événement utilisateur, qui dans ce cas est une authentification pour provoquer un changement d'état et par conséquent provoquer un nouveau rendu du composant. Notez que vous n'êtes pas obligé d'utiliser le mot-clé replace. Son utilisation remplace l'URL actuelle au lieu de la pousser dans l'historique du navigateur.
Rediriger l'utilisateur vers une autre page à l'aide de useNavigate()
L'autre option pour effectuer des redirections dans React est la useNavigate() accrocher. Ce hook permet d'accéder à l'API de navigation impérative. Commencez par l'importer depuis react-router-dom.
importer { useNavigate } de "réagir-routeur-dom" ;
Rediriger une fois que l'utilisateur est authentifié avec succès dans le handleSubmit() fonctionner comme ceci :
constante naviguer = utiliserNaviguer();
constante Connexion = () => {
constante naviguer = utiliserNaviguer();
const [nom d'utilisateur, setusername] = useState("");
const [mot de passe, setpassword] = useState("");
constante [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("authentifié") || faux)
);
const utilisateurs = [{ nom d'utilisateur: "Jeanne", le mot de passe: "mot de passe de test" }];
constante handleSubmit = (e) => {
e.preventDefault();
constante compte = utilisateurs.find((utilisateur) => utilisateur.nom d'utilisateur nom d'utilisateur);
si (compte && compte.mot de passe mot de passe) {
localStorage.setItem("authentifié", vrai);
naviguer("/dashboard");
}
};
revenir (
<div>
<formulaire onSubmit={handleSubmit}>
<saisir
taper="texte"
nom="Nom d'utilisateur"
valeur={nom d'utilisateur}
onChange={(e) => setusername (e.target.value)}
/>
<saisir
taper="le mot de passe"
nom="Mot de passe"
onChange={(e) => setpassword (e.target.value)}
/>
<type d'entrée="nous faire parvenir" valeur="Soumettre" />
</form>
</div>
);
};
Dans cet exemple, une fois que l'utilisateur a soumis le formulaire avec les détails corrects, il est redirigé vers le tableau de bord.
Lors de la création d'applications, l'un des objectifs est de donner aux utilisateurs la meilleure expérience. Vous pouvez le faire en ramenant l'utilisateur à la page qu'il était avant en le redirigeant vers la page de connexion. Vous pouvez le faire en passant -1 pour naviguer comme ceci, naviguer(-1). Il agit de la même manière que d'appuyer sur le bouton de retour de votre navigateur.
Routage en React
Dans cet article, vous avez appris comment rediriger un utilisateur vers une autre page dans React en utilisant à la fois le composant Navigate et le useNavigate() accrocher. L'article utilisait un formulaire de connexion pour montrer comment vous pouvez rediriger les utilisateurs non authentifiés d'une page protégée vers la page de connexion.