Introducción
Si eres de las personas que necesitan realizar una aplicación en la cual hay un sistema de autenticación y necesitas mostrar "X" vista dependiendo del rol, este es tu lugar.
Lo primero es decirte que tecnologias uso en el ejemplo:
- React 18.2.0
- react-router-dom 6.12.0
- zustand 4.3.8
Lo primero
No voy a ahondar mucho en el proceso de login, manejo del estado global etc, ire directo al grano, en este ejemplo tenemos un usuario que cuando se general el login, se popula con sus respectivos datos, y al hacer logout, ese usuario queda en null, la info del usuario se guarda en localStorage y se recupera al momento de inicializar el manejador de estado global, asi tendremos disponible de primera mano su información.
Estructura del proyecto (De ejemplo)
Dentro de la carpeta src, tenemos otra llamada router, en router pondremos todos nuestros routers, por ejemplo:
Dentro de cada archivo armaremos nuestro router para cada rol, con createBrowserRouter() y generamos la instancia del RouterProvider pasandole nuestras routes como en el ejemplo con AdminRoutes:
Manejo del rol
Por ultimo en la carpeta routes, crear un archivo AppRouter, el cual se encargará de mostrar el rol correspondiente de un usuario, segun su rol, gracias a que con la ayuda de un manejador de estado global, ya tenemos esa info de antemano:
Como pueden ver, si no hay role definido, muestra el PublicRouter el cual contiene en mi caso, solo un router con una vista de login. Este componente AppRouter deben montarlo en el componente raiz, main.
Sin nada más que decir, espero que les sea de ayuda este ejemplo.
Top comments (0)