Comment rediriger un utilisateur après sa connexion en React

Habituellement, lors de la construction d’applications web, les pages web de connexion sont utilisées pour protéger des pages exclusives. Par exemple, pour une plateforme de blogs, le panneau de contrôle peut être réservé aux personnes confirmées. Si un client non authentifié tente d’accéder à cette page web, l’application le redirige vers la page de connexion. Une fois qu’il est connecté, il obtient l’accès.

Nous allons voir comment vous pouvez rediriger un client d’une page web limitée vers une page de connexion. Nous verrons également comment renvoyer le client à la page sur laquelle il se trouvait après sa visite.

Créer une application React

Dans React Router v6, il y a deux moyens que vous pouvez utiliser pour rediriger un individu – le Naviguer et la partie useNavigate() hook.

Pour voir exactement comment ils fonctionnent, créez d’abord une application React en utilisant le hook create- react-app .

Créer une page de connexion

Vous devrez certainement développer une page web de connexion pour confirmer les utilisateurs. Pour plus de simplicité, vous utiliserez une variété de choses comme base de données individuelle.

Créez un tout nouveau document dans la base de données src et nommez-le Login. js. Ajoutez ensuite le code suivant, pour développer le type de connexion.

Il s’agit d’un type de connexion simple. Lorsqu’un client envoie son nom d’utilisateur et son mot de passe, l’application compare les données aux données de la variété. Si les détails du client restent dans la variété, l’application établit l’état authentifié pour cette personne à vrai.

Étant donné que vous vérifierez si la personne est confirmée dans le composant Tableau de bord, vous devez également stocker l’état de vérification à un endroit accessible par divers autres composants. Cet article utilise l’espace de stockage du voisinage. Dans une application réelle, l’utilisation du contexte React serait certainement une bien meilleure option.

Créer une page de tableau de bord

Créez un fichier nommé Tableau de bord. js et inclure le code correspondant pour créer le fichier tableau de bord .

Le tableau de bord ne doit être accessible qu’aux utilisateurs vérifiés. Par conséquent, lorsque les clients se rendent sur la page web du tableau de bord, une vérification initiale vérifie s’ils sont authentifiés et, s’ils ne le sont pas, les redirige vers la page de connexion.

Pour ce faire, vous aurez besoin d’établir les cours de l’application en utilisant le routeur React, donc installez react- router-dom via npm.

Ensuite, dans index. js , créez les routes.

Protéger la page du tableau de bord

Maintenant que vos cours d’application sont configurés, la prochaine étape consiste à rendre la route du tableau de bord privée. Lorsque le composant Tableau de bord est lancé, il récupère la vérification dans l’espace de stockage local et la stocke dans l’état. Il vérifie ensuite si la personne est confirmée. Si c’est le cas, l’application renvoie la page web du tableau de bord ou la redirige vers la page web de connexion.

Redirection de l’utilisateur vers la page de connexion à l’aide de Navigate

Pour rediriger le client, vous devez utiliser la fonction Naviguer de l’élément Navigate . Gardez à l’esprit que ce composant a modifié l’élément Redirect utilisé dans React Router v5.

Importation Naviguer à partir de react-router-dom.

Puis l’utiliser comme conforme pour rediriger les clients non authentifiés.

La partie Navigate est une API déclarative. Elle s’appuie sur un événement individuel, qui dans cette situation est la vérification pour provoquer une modification de l’état et aussi par conséquent créer un re-rendu du composant. Gardez à l’esprit qu’il n’est pas nécessaire d’utiliser les mots clés change. L’utilisation de ce mot clé modifie l’URL actuelle au lieu de l’enregistrer dans l’historique du navigateur.

Rediriger l’utilisateur vers une autre page en utilisant useNavigate()

Le divers autre choix pour effectuer des redirections dans React est la méthode useNavigate() hook. Ce crochet fournit l’accessibilité à l’API nécessaire à la navigation. Pour l’utiliser, commencez par l’importer depuis react-router-dom.

Après la connexion, rerouter l’individu vers la page du tableau de bord en utilisant le hook handleSubmit() comme indiqué ci-dessous :

Dans cet exemple, lorsque l’utilisateur soumet le type avec les informations appropriées, il est redirigé vers le panneau de contrôle.

Notez que lors de la production d’applications, l’un des objectifs est d’offrir aux individus la meilleure expérience possible. Dans ce cas, le fait de renvoyer le client à la page web sur laquelle il est arrivé avant de le rediriger vers la page de connexion améliore l’expérience individuelle. Vous pouvez le faire en passant -1 à la navigation, comme suit naviguer (-1 ).

Le routage dans React

Dans cet article, vous avez découvert comment rediriger un individu vers une autre page dans React en utilisant à la fois l’élément Navigate et le hook useNavigate(). Utilisez ces détails pour développer un flux d’authentification pour votre propre application où vous redirigez les individus non authentifiés d’une page sécurisée vers la page web de connexion.

S’abonner à notre lettre d’information