Saltar a contenido

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() desde AuthContext

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.