Rutas privadas y públicas en React

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:50

Rutas privadas y públicas en React

Curso de React.js: Navegación con React Router

Clase 12 de 30

Clase 12 / 30

Recursos

Proteger rutas en una aplicación React no se trata solo de validar formularios, también implica que el menú de navegación reaccione al estado de autenticación del usuario. Aquí aprenderás a renderizar enlaces de forma condicional usando un contexto de autenticación, propiedades personalizadas en cada ruta y el hook useAuth, evitando que React crashee al no encontrar datos del usuario.

¿Por qué falla el menú cuando no hay usuario autenticado?

El problema aparece cuando el menú intenta mostrar enlaces como profile o logout sin que exista un auth.user en el contexto. React no encuentra la propiedad username y la aplicación se rompe.

La lógica deseada es simple: si alguien acaba de llegar y aún no se registra, no tiene sentido mostrarle un enlace a su perfil porque esa cuenta no existe. Y al revés, si ya hizo login, mostrarle otra vez el enlace de login sobra.

¿Qué hace el hook useAuth? Devuelve el contexto de autenticación con la propiedad auth.user, que será un objeto si el usuario está logueado o null si no lo está [02:40].

¿Cómo marcar rutas privadas con una propiedad personalizada?

La estrategia consiste en agregar una propiedad private a cada ruta dentro del array de rutas. Por defecto todas reciben private: false, lo que las vuelve públicas, y solo a las rutas que requieren autenticación se les asigna private: true.

En el ejemplo del transcript, se marcaron como privadas:

La ruta de profile.
La ruta de logout.

Esto deja al resto como rutas accesibles sin importar el estado del usuario. La idea es que el menú lea esa propiedad y decida si renderiza o no cada enlace.

¿Dónde debe vivir el componente Menú?

Como el menú consume el contexto de autenticación, tiene que estar dentro del AuthProvider. Y para usar componentes como NavLink o hooks como useNavigate y useParams, también debe estar dentro del HashRouter [03:30]. Si lo sacas de ahí, nada funciona.

¿Cómo renderizar condicionalmente cada enlace del menú?

Dentro del routes.map, en lugar de un return implícito directo, abres llaves para escribir lógica antes de retornar el JSX. La pregunta clave es cuándo no renderizar un enlace.

La condición que se evalúa es la siguiente: si la ruta es privada y no existe auth.user, retornas null. En cualquier otro caso, el enlace se renderiza con normalidad [05:10].

js routes.map((route) => { if (route.private && !auth.user) return null; if (route.publicOnly && auth.user) return null; return ( <NavLink to={route.path} key={route.path}> {route.name} </NavLink> ); });

Con esto, al entrar sin sesión solo verás el enlace a login. Al autenticarte, el menú crece y aparecen profile y logout. Al cerrar sesión, vuelve a ocultarlos.

¿Qué pasa si invierto la condición? Si validas cuándo sí renderizar en lugar de cuándo no, terminas con un condicional largo y difícil de leer. Es más limpio retornar null en los casos negativos.

¿Cómo ocultar el enlace de login cuando ya hay sesión activa?

Aquí aparece la segunda capa del problema. Aunque el usuario ya esté autenticado, el enlace a login sigue apareciendo en el menú. Para resolverlo, se introduce una nueva propiedad llamada publicOnly: true en la ruta de login.

Esta propiedad indica que el enlace solo debe verse cuando no hay autenticación. La condición opera al revés que en las rutas privadas: si la ruta es publicOnly y existe auth.user, retornas null.

Después de aplicarlo, el comportamiento queda así:

Sin sesión, solo aparece login en el menú.
Al hacer login, desaparece login y aparecen profile y logout.
Al hacer logout, vuelve a mostrarse únicamente login.

¿Por qué conviene preguntar cuándo NO renderizar?

La solución elegante consiste en escribir condiciones cortas que devuelvan null en los casos prohibidos, en lugar de armar un condicional gigante con múltiples AND y OR para validar cuándo sí mostrar el enlace.

Esto mantiene el código declarativo y fácil de extender. Si mañana agregas una propiedad nueva, solo escribes otro pequeño condicional con su return null correspondiente.

¿Qué falta por proteger en la aplicación?

El menú ya respeta el estado de autenticación, pero la protección es solo visual. Si un usuario escribe manualmente la URL /login estando autenticado, la página sigue cargando. Y si escribe /profile sin estar logueado, la aplicación se rompe porque no encuentra auth.user.

El siguiente paso es implementar redirecciones automáticas: enviar a profile cuando alguien autenticado intente entrar a login, y bloquear el acceso a profile cuando no exista sesión activa.

¿Cómo resolverías tú esa redirección? Cuéntalo en los comentarios con tu enfoque, sin importar si funcionó a la primera o si te enredaste con los condicionales.

Harold Zurita Simon

Hace 2 años

Menú con rutas públicas y privadas

. Para simular tener rutas públicas y privadas en nuestro Menu, necesitamos añadir algunas propiedades a nuestro array de rutas. . primero agregamos la propiedad private para indicar si una ruta es privada o no. Luego a la ruta /login le añadimos la propiedad publicOnly que nos ayudará a ocultar esta ruta cuando estemos logueados pero siga siendo una ruta pública. .

const routes = [];
routes.push({
  to: '/',
  text: 'Home',
  private: false,
});
routes.push({
  to: '/blog',
  text: 'Blog',
  private: false,
});
routes.push({
  to: '/profile',
  text: 'Profile',
  private: true,
});
routes.push({
  to: '/login',
  text: 'Login',
  private: false,
  publicOnly: true,
});
routes.push({
  to: '/logout',
  text: 'Logout',
  private: true,
});

. Finalmente, agregamos 2 condicionales para que al momento de renderizar las rutas: .

Si la ruta es privada y no estamos logueados, entonces no se renderiza la ruta.
Si la ruta es solo pública y estamos logueados, entonces no se renderiza la ruta.

import React from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from './auth';

function Menu() {
  const auth = useAuth();
  
  return (
    <nav>
      <ul>
        {routes.map(route => {
          if (route.publicOnly && auth.user) return null;
          if (route.private && !auth.user) return null;
          
          return (
            <li key={route.to}>
              <NavLink
                style={({ isActive }) => ({
                  color: isActive ? 'red' : 'blue',
                })}
                to={route.to}
              >
                {route.text}
              </NavLink>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

...
export { Menu };

. Otra forma de renderizar las rutas sin tener que crear una propiedad publicOnly sería verificar si estamos logueados y la ruta corresponde a /login. .

import React from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from './auth';

function Menu() {
  const auth = useAuth();
  
  return (
    <nav>
      <ul>
        {routes.map(route => {
          if (!auth.user && route.private) return;
          if (auth.user && route.to === '/login') return;
          
          return (
            <li key={route.to}>
              <NavLink
                style={({ isActive }) => ({
                  color: isActive ? 'red' : 'blue',
                })}
                to={route.to}
              >
                {route.text}
              </NavLink>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

const routes = [];
routes.push({
  to: '/',
  text: 'Home',
  private: false,
});
routes.push({
  to: '/blog',
  text: 'Blog',
  private: false,
});
routes.push({
  to: '/profile',
  text: 'Profile',
  private: true,
});
routes.push({
  to: '/login',
  text: 'Login',
  private: false,
});
routes.push({
  to: '/logout',
  text: 'Logout',
  private: true,
});

export { Menu };

Comentarios (72)72 comentarios

Diego Vergara

Hace 4 años

Luis Angel Olivárez Estrada

Juan Pablo Bahos

Jhon Eduard Bocanegra Ortiz

SERGIO SAUL ROJAS VELASQUEZ

Hace 3 años

Brandon Argel Verdeja Domínguez

Andrés Esteban Rodríguez Jiménez

Ivan González

Samuel Miranda Martínez

FERNANDO ALBERTO RAMOS MARTINEZ

Juan Castro

Profesor

Alvaro H. Ruiz V.

Santiago Pérez Sanabria

Jhon Jairo Gomez Calderon

Juan Mercado

Ignacio Basilio

Alarcon Ricardo Ezequiel

Ing. Moisés Toro

Hace un año

Sebastian Carballo

Sebastian Hugo Sanchez

Nicolás García López

Gonzalo Gutiérrez Castillo

Daniel Alessandro García Batres

Charles Castillo Rosas

Remix Zapata

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Rutas privadas y públicas en React