Habituellement, lors de la construction 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 qu’il est connecté, il peut accéder à la page.
Nous allons voir comment rediriger un utilisateur d’une page restreinte vers une page de connexion. Nous verrons également comment renvoyer l’utilisateur à la page sur laquelle il se trouvait après s’être connecté.
Créer une application React
Dans React Router v6, il y a deux façons de rediriger un utilisateur – l’option Naviguer et le composant useNavigate() hook.
Pour voir comment ils fonctionnent, il faut d’abord créer une application React à l’aide de la commande create-react-app commande.
npx create-react-app react-redirect
Créer une page de connexion
Vous devrez créer une page de connexion pour authentifier les utilisateurs. Pour simplifier, vous utiliserez un tableau d’objets comme base de données des utilisateurs.
Créez un nouveau fichier dans le répertoire src et le nommer Login.js. Ajoutez ensuite le code suivant pour créer le formulaire de connexion.
import { useState } from "react";
import Dashboard from "./Dashboard";
const Login = () => {
const [username, setusername] = useState("");
const [password, setpassword] = useState("");
const [authenticated, setauthenticated] = useState(localStorage.getItem(localStorage.getItem("authenticated")|| false));
const users = [{ username: "Jane", password: "testpassword" }];
const handleSubmit = (e) => {
e.preventDefault()
const account = users.find((user) => user.username === username);
if (account && account.password === password) {
setauthenticated(true)
localStorage.setItem("authenticated", true);
}
};
return (
<div>
<p>Welcome Back</p>
<form onSubmit={handleSubmit}>
<input
type="text"
name="Username"
value={username}
onChange={(e) => setusername(e.target.value)}
/>
<input
type="password"
name="Password"
onChange={(e) => setpassword(e.target.value)}
/>
<input type="submit" value="Submit" />
</form>
</div>
)
};
}
export default Login;
Il s’agit d’un simple formulaire de connexion. Lorsqu’un utilisateur soumet son nom d’utilisateur et son mot de passe, l’application compare les données aux données du tableau. Si les détails de l’utilisateur sont dans le tableau, l’application définit l’état authentifié pour cet utilisateur à vrai.
Comme vous vérifierez si l’utilisateur est authentifié dans le composant Tableau de bord, vous devez également stocker l’état de l’authentification dans un endroit accessible aux autres composants. Cet article utilise le stockage local. Dans une application réelle, l’utilisation du contexte React serait un meilleur choix.
Créer une page de tableau de bord
Créer un fichier nommé Dashboard.js et ajoutez le code suivant pour créer le fichier Tableau de bord composant.
const Dashboard = () => {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
};
export default Dashboard;
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, il faut d’abord vérifier s’ils sont authentifiés et, si ce n’est pas le cas, les rediriger vers la page de connexion.
Pour ce faire, vous devrez configurer les routes de l’application en utilisant le routeur React, donc installez react-router-dom via npm.
npm install react-router-dom
Ensuite, dans index.jscréer les routes.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route index element={<App />} />
<Route path="login" element={<Login />} />
<Route path="dashboard" element={<Dashboard />} />
</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. Lorsque le composant Tableau de bord se charge, il récupère l’authentification du stockage local et la stocke dans l’état. Il vérifie ensuite si l’utilisateur est authentifié. S’il est authentifié, l’application renvoie la page du tableau de bord, sinon elle le redirige vers la page de connexion.
import { useEffect, useState } from "react";
const Dashboard = () => {
const [authenticated, setauthenticated] = useState(null);
useEffect(() => {
const loggedInUser = localStorage.getItem("authenticated");
if (loggedInUser) {
setauthenticated(loggedInUser);
}
}, []);
if (!authenticated) {
// Redirect
} else {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
}
};
export default Dashboard;
Rediriger l’utilisateur vers la page de connexion en utilisant Navigate
Pour rediriger l’utilisateur, vous devez utiliser l’option Naviguer . Notez que ce composant a remplacé le composant Redirection utilisé dans React Router v5.
Importation Naviguer depuis react-router-dom.
import { Navigate } from "react-router-dom";
Utilisez-le ensuite comme suit pour rediriger les utilisateurs non authentifiés.
if (!authenticated) {
return <Navigate replace to="/login" />;
} else {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
}
Le composant Naviguer est une API déclarative. Il s’appuie sur un événement utilisateur, qui dans ce cas est l’authentification, pour provoquer un changement d’état et, par conséquent, un nouveau rendu du composant. Notez que vous n’êtes pas obligé d’utiliser le mot-clé replace. L’utilisation de ce mot clé remplace l’URL actuelle au lieu de la pousser dans l’historique du navigateur.
Rediriger l’utilisateur vers une autre page en utilisant useNavigate()
L’autre option pour effectuer des redirections dans React est la méthode useNavigate() crochet. Ce hook permet d’accéder à l’API impérative navigate. Pour l’utiliser, commencez par l’importer depuis react-router-dom.
import { useNavigate } from "react-router-dom";
Après la connexion, rediriger l’utilisateur vers la page du tableau de bord en utilisant le hook handleSubmit() comme indiqué ci-dessous :
const navigate = useNavigate();
const Login = () => {
const navigate = useNavigate();
const [username, setusername] = useState("");
const [password, setpassword] = useState("");
const [authenticated, setauthenticated] = useState(
localStorage.getItem(localStorage.getItem("authenticated") || false)
);
const users = [{ username: "Jane", password: "testpassword" }];
const handleSubmit = (e) => {
e.preventDefault();
const account = users.find((user) => user.username === username);
if (account && account.password === password) {
localStorage.setItem("authenticated", true);
navigate("/dashboard");
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
name="Username"
value={username}
onChange={(e) => setusername(e.target.value)}
/>
<input
type="password"
name="Password"
onChange={(e) => setpassword(e.target.value)}
/>
<input type="submit" value="Submit" />
</form>
</div>
);
};
Dans cet exemple, une fois que l’utilisateur a soumis le formulaire avec les informations correctes, il est redirigé vers le tableau de bord.
Notez que lors de la création d’applications, l’un des objectifs est d’offrir aux utilisateurs la meilleure expérience possible. Dans ce cas, ramener l’utilisateur à la page sur laquelle il se trouvait avant de le rediriger vers la page de connexion améliore l’expérience de l’utilisateur. Vous pouvez le faire en passant -1 pour naviguer comme ceci, naviguer (-1).
Le routage dans 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 crochet useNavigate(). Utilisez ces informations pour créer un flux d’authentification pour votre propre application où vous redirigez les utilisateurs non authentifiés d’une page protégée vers la page de connexion.
