Archivos de la Carpeta src/routes #

La carpeta src/routes es fundamental para la navegación de tu aplicación. Contiene la configuración de todas las rutas, organizando cómo los usuarios acceden a las diferentes vistas y protegiendo el contenido sensible.

app.routes.tsx #

Este archivo es el corazón del sistema de enrutamiento de tu aplicación React. Define la estructura de navegación, mapeando las URLs a los componentes correspondientes y aplicando lógica de protección para rutas específicas.

• Descripción: app.routes.tsx utiliza react-router-dom para crear un enrutador basado en el navegador. Define una jerarquía de rutas que incluye rutas públicas (como el inicio de sesión) y rutas protegidas que requieren autenticación. También utiliza React.lazy para la carga perezosa de componentes de página, optimizando el rendimiento inicial de la aplicación.
• Propósito: Configurar la navegación de la aplicación, asegurar que los usuarios autenticados solo puedan acceder a contenido protegido y mejorar la velocidad de carga al dividir el código de las páginas.
• Funcionalidad clave:
  • createBrowserRouter: Esta función de react-router-dom es la encargada de crear la instancia principal del enrutador. Utiliza la API de historial del navegador para mantener la URL sincronizada con la interfaz de usuario.
  • Carga Perezosa (React.lazy): Componentes como LoginPage, Dashboard, StudentProfile, AddStudent, SchoolClass y Statistics se importan dinámicamente usando lazy. Esto significa que el código de estas páginas solo se carga cuando el usuario navega a ellas, reduciendo el tamaño inicial del paquete de la aplicación y mejorando el tiempo de carga.
  • Rutas Protegidas (<ProtectedRoute />): El componente ProtectedRoute (definido en ./protected.routes.tsx) actúa como un guardián de rutas. Envuelve un conjunto de rutas children, asegurándose de que solo los usuarios autenticados puedan acceder a ellas. Si un usuario no está autenticado, ProtectedRoute generalmente lo redirige a la página de inicio de sesión.
  • Layout Protegido (<ProtectedLayout />): Este componente de layout (importado de ../components/layouts/protected-layout/protected.layout.tsx) envuelve las rutas protegidas, proporcionando una estructura de interfaz de usuario común para todas ellas (por ejemplo, una barra lateral, una cabecera, un pie de página).
  • Rutas Anidadas: La configuración utiliza rutas anidadas, donde /dashboard actúa como una ruta padre. Esto permite definir sub-rutas como student/:id (para perfiles individuales), add-student (para agregar estudiantes), y :school/:course (para filtrar estudiantes por colegio y curso).
  • Ruta Índice (index: true): index: true en la ruta de Dashboard indica que este es el componente que se renderizará cuando la URL sea exactamente /dashboard, sin ningún segmento adicional.
  • Parámetros de URL Dinámicos: Rutas como student/:id y :school/:course utilizan parámetros de URL (indicados con :). Esto permite que la misma ruta renderice diferentes contenidos basándose en el valor del parámetro en la URL. Por ejemplo, student/123 y student/456 usarán el mismo StudentProfile pero con diferentes IDs.
• Rol en la aplicación: app.routes.tsx es la columna vertebral de la navegación. Define la experiencia del usuario a través de la aplicación, controlando a qué contenido puede acceder y cómo se organiza ese contenido. Su diseño modular y el uso de la carga perezosa contribuyen significativamente a la seguridad y el rendimiento general de la aplicación.

// src/routes/app.routes.tsx
import { lazy } from "react";
import { createBrowserRouter, type RouteObject } from "react-router-dom";
import { ProtectedRoute } from "./protected.routes";
import ProtectedLayout from "../components/layouts/protected-layout/protected.layout";

const LoginPage = lazy(() => import("../pages/login.page"));
const Dashboard = lazy(() => import("../pages/dashboard"));
const StudentProfile = lazy(() => import("../pages/student.profile"));
const AddStudent = lazy(() => import("../pages/add.student"));
const SchoolClass = lazy(() => import("../pages/school.class"));
const Statistics = lazy(() => import("../pages/statistics"));

const routes: RouteObject[] = [
  {
    path: "/",
    element: <LoginPage />,
  },
  {
    element: <ProtectedRoute />, // Este componente protege las rutas hijas
    children: [
      {
        element: <ProtectedLayout />, // Este componente define el layout para las rutas protegidas
        children: [
          {
            path: "/dashboard", // Ruta base para el área protegida y con layout
            children: [
              { index: true, element: <Dashboard /> }, // Ruta para /dashboard
              { path: "student/:id", element: <StudentProfile /> }, // Ruta para /dashboard/student/:id
              { path: "add-student", element: <AddStudent /> }, // Ruta para /dashboard/add-student
              { path: ":school/:course", element: <SchoolClass /> }, // Ruta para /dashboard/:school/:course
              { path: "estadisticas", element: <Statistics /> }, // Ruta para /dashboard/estadisticas
            ],
          },
        ],
      },
    ],
  },
];

// Define un tipo para el enrutador para un mejor tipado en TypeScript
interface AppRouter extends ReturnType<typeof createBrowserRouter> {}
export const router: AppRouter = createBrowserRouter(routes);

protected.routes.tsx #

Este archivo define el componente ProtectedRoute, que actúa como un guardián de rutas en tu aplicación. Su función principal es asegurar que solo los usuarios autenticados puedan acceder a ciertas partes de la aplicación.

• Descripción: ProtectedRoute es un componente de enrutamiento que se encarga de la lógica de protección. Utiliza un hook personalizado (useProtectedRoute) para gestionar el estado de carga y el proceso de autenticación, mostrando un spinner de carga o denegando el acceso si el usuario no está autenticado.
• Propósito: Implementar un mecanismo de control de acceso para las rutas de la aplicación, garantizando que el contenido sensible solo sea visible para usuarios validados.
• Funcionalidad clave:
  • useProtectedRoute(): Este es un hook personalizado (importado de ../hooks/use.protected.route.ts) que encapsula la lógica principal de la protección de rutas. Es probable que este hook:
    • Verifique el token de autenticación del usuario.
    • Maneje el proceso de revalidación del token si es necesario.
    • Gestione un estado de carga (isLoading) mientras se determina la autenticación.
    • Realice redirecciones a la página de login si el usuario no está autenticado después de la verificación.
  • isLoading: Un estado booleano retornado por useProtectedRoute que indica si la lógica de autenticación está en progreso. Si es true, el componente muestra un LoadingSpinner.
  • useAuth().isAuthenticated: Después de que isLoading sea false, se verifica el estado de autenticación del usuario desde el contexto de autenticación (useAuth).
  • LoadingSpinner: Un componente de UI (importado de ../components/ui/loading.spinner.tsx) que se muestra al usuario mientras se verifica su estado de autenticación. Esto mejora la experiencia de usuario, evitando un "flash" de contenido no autorizado o roto.
  • return null; (para usuario no autenticado): Si el usuario no está autenticado (!isAuthenticated), el componente retorna null. Esto, en conjunto con la lógica de redirección en useProtectedRoute, asegura que no se renderice ningún contenido de la ruta protegida.
  • <Outlet />: Si el usuario está autenticado y la lógica de protección ha finalizado, ProtectedRoute renderiza el componente <Outlet />. Este componente es proporcionado por react-router-dom y renderiza el elemento children de la ruta anidada que coincide con la URL actual.
• Rol en la aplicación: protected.routes.tsx es una pieza fundamental de la seguridad y la gestión de la experiencia de usuario en las rutas protegidas. Garantiza que la aplicación funcione de manera segura, proporcionando un feedback visual adecuado durante los procesos de autenticación y acceso.

// src/routes/protected.routes.tsx
import { Outlet } from "react-router-dom"; // Componente para renderizar rutas anidadas
import { useAuth } from "../components/auth/auth.context"; // Hook para acceder al contexto de autenticación
import { LoadingSpinner } from "../components/ui/loading.spinner"; // Componente para mostrar un spinner de carga
import { useProtectedRoute } from "../hooks/use.protected.route"; // Hook personalizado para la lógica de protección

export const ProtectedRoute = () => {
  // Obtiene el estado de carga del hook de protección de ruta
  const isLoading = useProtectedRoute();

  // Si está cargando (verificando autenticación), muestra un spinner
  if (isLoading) {
    return <LoadingSpinner />;
  }

  // Si el usuario no está autenticado después de la carga, no renderiza nada (la redirección ocurre en el hook)
  if (!useAuth().isAuthenticated) {
    return null; // Importante para evitar que se muestre contenido fugazmente
  }

  // Si está autenticado, renderiza el contenido de la ruta anidada
  return <Outlet />;
};