Comment créer une route protégée dans React

Les parcours protégés sont des parcours qui ne permettent l’accessibilité qu’aux personnes accréditées. Cela indique que les utilisateurs doivent initialement remplir certains problèmes avant d’accéder à ce chemin spécifique. Ceci est essentiel pour sauvegarder certains cours ou détails. Il existe différentes façons d’utiliser les parcours sécurisés dans React. Parmi elles, l’utilisation d’un élément d’ordre supérieur qui enveloppe un parcours protégé et vérifie si un individu est confirmé avant de rendre un composant.

Création d’une application React

Avant de produire le parcours sécurisé, vous devrez développer une application React.

Exécutez la commande listée ci-dessous pour utiliser le create- react-app l’outil de commande pour amorcer l’application.

Le site create- react-app va créer un dossier nommé protect- routes-react contenant toutes les données nécessaires et également des plans de démarrage.

Naviguez vers le dossier et exécutez également npm begin pour commencer l’application.

Ouvrez votre dossier d’application avec votre éditeur plein écran préféré et personnalisez également les éléments suivants . App. js de sorte qu’il comprenne juste le code adhérent.

Vous êtes maintenant prêt à établir les cours.

Mise en place du routeur React

Exécutez la commande npm indiquée ci-dessous dans le terminal pour mettre en place le routeur React. react- router-dom.

Dans cette application, vous allez certainement produire trois pages primaires :

• La page web d’accueil (la page de démarrage).
• Page de profil (protégée, donc seuls les clients connectés y ont accès).
• Page À propos (publique, donc tout individu peut y accéder).

Pour commencer, développez un élément nommé Navbar. js. Cet élément sera constitué des liens de navigation vers les 3 pages web.

Dans ces documents, importez le composant Lien de la partie react- router-dom et ajoutez les liens.

Après avoir créé les liens web, produisez les routes correspondantes dans le répertoire App. js.

Ensuite, développez les composants que vous avez référencés dans App. js.

Dans Home. js ajoutez le code suivant pour créer la page web.

Dans Profil. js incluez le code suivant pour développer la page web du profil.

Enfin, dans A propos. js , ajoutez le code adhérent pour développer la page autour.

Une fois que vous avez produit les pages web, vous pouvez actuellement créer les routes sauvegardées.

Création de routes protégées dans React

Le site / maison et / à propos Les cours sont des voies publiques impliquant que tout individu peut y accéder, cependant seuls les clients vérifiés peuvent accéder au cours de profil. Vous, pour cette raison, avez besoin d’un moyen pour le visiter en tant qu’individu.

Configuration de la fausse authentification

Comme il ne s’agit pas d’un tutoriel de vérification, vous utiliserez certainement React. useState hook pour répliquer un système de connexion.

Dans App. js , incluez ce qui suit .

Ici, vous suivez le standing de connexion de l’individu en utilisant l’état. Vous avez deux boutons, le commutateur de connexion, et le commutateur de déconnexion. Ces commutateurs sont effectués ultérieurement selon qu’un utilisateur est visité ou non.

Si le client est déconnecté, le bouton de connexion est affiché. Le fait de cliquer dessus déclenchera certainement la fonction de connexion qui mettra à niveau le.isLoggedIn à l’état true ainsi que par conséquent l’affichage de la connexion au bouton de déconnexion.

Protection des composants privés

Pour sécuriser les cours, les composants exclusifs doivent de même avoir l’accessibilité à l’.isLoggedIn valeur. Vous pouvez créer un tout nouvel élément qui approuve la valeur isLoggedIn l’état comme un prop ainsi que l’élément exclusif comme un enfant.

Par exemple, si votre tout nouveau composant s’appelle.Protégé , vous rendriez certainement une partie privée en l’enveloppant de manière similaire à ceci :

Le site Protégé examinera certainement si estLoggedIn est vrai ou faux. Si c’est vrai, il procédera ainsi qu’il retournera l’élément Privé . S’il est faux, il redirigera l’individu vers une page où il pourra se connecter.

Apprenez-en beaucoup plus sur divers autres moyens que vous pouvez utiliser pour fournir une partie en fonction des problèmes à partir de ce court article sur le rendu conditionnel dans React.

Dans votre application, créez une donnée nommée Protégé.js et incluez également le code conforme.

Dans ce composant, la déclaration if est utilisée pour inspecter si l’utilisateur est validé. S’il ne l’est pas, Naviguer de react- router-dom les reroute vers la page d’accueil. Néanmoins, si l’utilisateur est authentifié, la partie rend les enfants.

Pour protéger le Profil il faut l’entourer de la balise Protégé ainsi que de venir sur le chemin isLoggedIn en tant que prop.

L’élément App doit maintenant apparaître comme suit .

C’est tout sur la création de chemins protégés. Vous ne pouvez actuellement accéder à la page du compte que si vous êtes connecté. Si vous essayez de naviguer vers la page du compte sans vous connecter, vous serez certainement redirigé vers la page d’accueil.

Contrôle d’accès basé sur les rôles

Les parcours protégés dans React vous aident à restreindre l’accès des clients non authentifiés à une page. Ceci est très basique et aussi dans de nombreux cas, vous pourriez avoir besoin d’aller aussi plus loin et aussi limiter les individus en fonction de leurs fonctions. Par exemple, vous pouvez avoir une page réclamant une page d’analyse qui ne donne accès qu’aux admins. Ci-dessous, vous devrez inclure une logique dans la section Protégé pour vérifier si un client a besoin de l’accessibilité à ce cours en fonction de sa fonction.

Abonnez-vous à notre bulletin d’information