Documentación del Sistema de Ruteo
Este archivo documenta el enrutamiento principal de la aplicación, incluyendo rutas públicas, privadas, y lógica de control de acceso basada en roles.
AppRouter.jsx
Función
Define la estructura de navegación mediante react-router-dom
. Organiza rutas públicas y privadas en función del rol del usuario.
Rutas Definidas
Ruta | Componente | Acceso | Rol Requerido |
---|---|---|---|
/ |
Login |
Pública | — |
/register |
Register |
Pública | — |
/home |
HomeUser |
Privada | user |
/cart |
Cart |
Privada | user |
/map |
SellersMap |
Privada | user |
/seller/home |
SellerHome |
Privada | seller |
/profile |
UserProfile |
Privada | user , seller |
/orders |
OrdersPreview |
Privada | user , seller |
/orders/:id |
OrderDetail |
Privada | user , seller |
Fragmento Clave
<Route path="/home" element={
<PrivateRoute roleRequired="user">
<Home />
</PrivateRoute>
} />
Composición
Elemento | Descripción |
---|---|
<BrowserRouter> |
Router principal |
<Routes> |
Agrupa las rutas |
<Route> |
Define rutas individuales |
<Layout> |
Envoltorio para rutas privadas con navbar/sidebar |
<PrivateRoute> |
Protección de acceso por rol y autenticación |
PrivateRoute.jsx
Función
Componente envoltorio que restringe el acceso a rutas privadas basándose en:
- Existencia del usuario (
AuthContext
) - Validez del token JWT (no expirado)
- Coincidencia del rol con los roles requeridos
Props
Prop | Tipo | Descripción |
---|---|---|
children |
ReactNode | Elemento JSX que se renderiza si pasa la validación |
roleRequired |
string / array | Uno o más roles requeridos para acceder |
Flujo Lógico
if (!user || token expirado || rol no permitido) {
return <Navigate to="/" />
}
- Usa
jwtDecode
para validar expiración del token. - Extrae el rol del usuario desde el token.
- Redirige a
/home
si el rol no coincide. - Redirige a
/
si no hay usuario o token.
Indicador de carga
Muestra un spinner si isLoading
está activo al cargar la sesión:
if (isLoading) {
return <div className="animate-spin ...">Cargando...</div>
}
Requisitos
- Librerías necesarias:
react-router-dom
:BrowserRouter
,Routes
,Route
,Navigate
jwt-decode
: decodificación de tokens JWT- Hook personalizado:
useAuth()
desdeAuthContext
Buenas Prácticas
- Mantener las rutas protegidas agrupadas en
<Layout>
para UI consistente. - Siempre validar token en
PrivateRoute
para evitar acceso con sesión inválida. - Centralizar redirecciones en
PrivateRoute
para evitar lógica duplicada.