0Pricing
React Academy · Lección

Rutas protegidas y guards de autenticación

Redirija a los usuarios no autenticados al inicio de sesión mediante componentes envolventes o guards basados en loaders.

Rutas protegidas y guards de autenticación es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Por qué proteger las rutas?

Algunas páginas (dashboard, perfil y administración) solo deben ser accesibles para usuarios autenticados. React Router proporciona dos enfoques: componentes wrapper y guards basados en loaders.

Estructura del estado de autenticación

Primero, establezca un contexto de autenticación que los componentes puedan consultar para saber si el usuario ha iniciado sesión.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (creds) => { const u = await apiLogin(creds); setUser(u); };
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

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

Guard mediante un componente wrapper

Cree un componente PrivateRoute que compruebe la autenticación y redirija al inicio de sesión si el usuario no está autenticado.

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

// Usage in router:
{ element: <PrivateRoute />, children: [
  { path: '/dashboard', element: <Dashboard /> },
]}

Conservar la URL de redirección

Guarde la URL que el usuario intentó visitar para poder devolverlo allí después de iniciar sesión. Pásela mediante state en el componente Navigate.

function PrivateRoute() {
  const { user } = useAuth();
  const location = useLocation();
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <Outlet />;
}

// In login handler:
const location = useLocation();
const from = location.state?.from?.pathname || '/';
navigate(from, { replace: true });

Guard basado en loader (Data Router)

En la API de Data Router, añada una comprobación de autenticación al loader de la ruta. Lance una redirección si el usuario no está autenticado.

import { redirect } from 'react-router-dom';

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token) throw redirect('/login');
  return token;
}

const router = createBrowserRouter([
  {
    path: '/dashboard',
    loader: requireAuth,
    element: <Dashboard />,
  },
]);

Guards basados en roles

Amplíe el guard para comprobar los roles. Redirija a una página de acceso no autorizado si al usuario le falta el rol requerido.

function AdminRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role !== 'admin') return <Navigate to="/unauthorized" replace />;
  return <Outlet />;
}

Estado de carga durante la comprobación de autenticación

Si el estado de autenticación se carga de forma asíncrona (por ejemplo, desde un servidor), muestre un indicador de carga mientras la comprobación está pendiente para evitar que la página de inicio de sesión aparezca brevemente.

function PrivateRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

Proteger varias rutas a la vez

Agrupe todas las rutas protegidas bajo un único wrapper PrivateRoute para no repetir el guard en cada ruta individualmente.

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <PrivateRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
]);

Gestión de la caducidad del token

Compruebe la caducidad del token dentro del guard o en un interceptor global y cierre la sesión del usuario cuando el token caduque, redirigiéndolo al inicio de sesión.

function isTokenValid(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 > Date.now();
}

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token || !isTokenValid(token)) throw redirect('/login');
  return token;
}

Flujo del token de actualización

Antes de redirigir tras un 401, intente actualizar el token. Redirija al inicio de sesión únicamente si la actualización también falla.

async function requireAuth() {
  let token = localStorage.getItem('token');
  if (!token || isExpired(token)) {
    token = await refreshToken();
    if (!token) throw redirect('/login');
    localStorage.setItem('token', token);
  }
  return token;
}

Conservar la autenticación entre recargas

Guarde el token de autenticación en localStorage o en una cookie HttpOnly. Al cargar la aplicación, rehidrate el estado de autenticación antes de renderizar las rutas protegidas.

Comprobación rápida

Al usar un guard de autenticación basado en loader en React Router, ¿qué debe lanzar para redirigir a un usuario no autenticado?

Resumen

Proteja las rutas con un wrapper PrivateRoute que use <Outlet /> o con un loader que lance redirect(). Conserve la URL solicitada en el estado de navegación, gestione los estados de carga para evitar parpadeos y agrupe las rutas protegidas para no duplicar código.

Preguntas frecuentes

¿La lección «Rutas protegidas y guards de autenticación» es gratis?

Sí — el texto completo de «Rutas protegidas y guards de autenticación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Rutas protegidas y guards de autenticación»?

Redirija a los usuarios no autenticados al inicio de sesión mediante componentes envolventes o guards basados en loaders. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Rutas protegidas y guards de autenticación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Rutas anidadas y layouts con Outlet
  2. Loaders y actions (API de Data Router)
  3. Rutas protegidas y guards de autenticación
  4. Gestionar el estado en los parámetros de búsqueda de la URL
← Volver a React Academy