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.