Route privée, publique et restreinte avec React Router

Si vous travaillez sur application il est fort probable que vous utilisez react router comme package pour définir vos routes. Dans cet article nous allons voir comment créer des routes privées, publics et restreintes avec react router. Nous allons construire une application simple avec les composants suivants :

1. Home: une page publique accessible à tous les utilisateurs.
2. Dashboard : une route privée à laquelle seul les utilisateur authentifiés peuvent accéder.
3. SignIn: une page restreinte que les utilisateurs non authentifiés peuvent voir. Pour en savoir plus, nous ne voulons pas afficher la page de connexion après la connexion au site. Si l’utilisateur autorisé se rend sur la page de connexion, nous le redirigerons vers la page du tableau de bord.

Route privée

PrivateRoute est le composant pour les routes privées dans l’application. Si l’utilisateur est connecté, le composant en question est affiché ; sinon l’utilisateur est redirigé vers la page de connexion.

Route publique

D’autre part, le composant PublicRoute est le composant pour toutes les routes publiques et restreintes. La différence entre les deux types est définie si restrictedprops. restricted = falsece qui signifie que l'itinéraire est publique ou bien restreinte.

Rassemblez le tout dans l’<App>

Enfin arrivé au <App>, nous pouvons facilement déclarer toutes les routes de notre application.

Conclusion

En espérant vous avoir aider.

NB: cette structure vous permet d’externaliser la logique concernant l’authentification dans le fichier isLoginfonction se trouvant séparément dans le dossierutils.

The Nothing 🔺