Rutas Protegidas y Autenticación

Las rutas protegidas son componentes que verifican si el usuario cumple una condición antes de mostrar la página. Si no cumple (no está autenticado, no tiene el rol necesario), lo redirigen automáticamente al login. Este patrón es esencial en cualquier aplicación real: el dashboard, el perfil, el panel de admin nunca deben ser accesibles sin autenticación.

Se implementa con un componente wrapper que usa Outlet si se permite el acceso, o Navigate para redirigir si no.

El patrón AuthContext + RutaProtegida es el estándar profesional. AuthContext centraliza: el usuario actual, las funciones login/logout, y el estado loading (para no mostrar el login por un instante mientras verifica si ya hay sesión). RutaProtegida consulta el contexto y decide.

El atributo replace en Navigate es importante: sin él, la ruta protegida queda en el historial del navegador y al hacer login el botón "volver" intentaría acceder al dashboard otra vez, creando un ciclo confuso.

import { Navigate, Outlet } from "react-router-dom";
import { createContext, useContext, useState } from "react";

// Auth Context
const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [usuario, setUsuario] = useState(null);

  const login = async (email, password) => {
    // Llamada a API...
    const user = await apiLogin(email, password);
    setUsuario(user);
    return user;
  };

  const logout = () => setUsuario(null);

  return (
    <AuthContext.Provider value={{ usuario, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

// Ruta Protegida
function RutaProtegida({ rol }) {
  const { usuario } = useAuth();

  if (!usuario) {
    return <Navigate to="/login" replace />;
  }

  if (rol && usuario.rol !== rol) {
    return <Navigate to="/no-autorizado" replace />;
  }

  return <Outlet />;
}

// Uso en rutas
function App() {
  return (
    <AuthProvider>
      <Routes>
        <Route path="/login" element={<Login />} />

        {/* Rutas que requieren autenticación */}
        <Route element={<RutaProtegida />}>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/perfil" element={<Perfil />} />
        </Route>

        {/* Solo para admins */}
        <Route element={<RutaProtegida rol="admin" />}>
          <Route path="/admin" element={<AdminPanel />} />
        </Route>
      </Routes>
    </AuthProvider>
  );
}