Control de Acceso en Menú con Autenticación React

Clase 12 de 30 • Curso de React.js: Navegación con React Router

Contenido del curso

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

Resumen

Controlar qué enlaces aparecen en el menú según el estado de autenticación es una necesidad real en cualquier aplicación con React. Aquí se aborda paso a paso cómo mostrar u ocultar rutas en función de si el usuario ya hizo login o no, utilizando React Context, hooks personalizados y propiedades condicionales en cada ruta.

¿Por qué el menú debe reaccionar al estado de autenticación?

Cuando un usuario no ha iniciado sesión, mostrarle un enlace a "Profile" provoca un error. El contexto de autenticación no tiene la propiedad username, React no la encuentra y la aplicación se rompe [0:42]. Lo mismo ocurre a la inversa: si ya existe una sesión activa, no tiene sentido seguir mostrando la página de login en el menú.

El objetivo es claro:

Usuario sin sesión: mostrar solo rutas públicas como login.
Usuario con sesión: mostrar rutas privadas como profile y logout, y ocultar login.

¿Cómo se agregan propiedades de visibilidad a las rutas?

Dentro del archivo del menú, cada ruta ya es un objeto con sus propiedades básicas. La estrategia consiste en añadir una nueva propiedad llamada private [2:06].

js // Ejemplo de rutas con la propiedad private const routes = [ { path: '/home', label: 'Home', private: false }, { path: '/login', label: 'Login', private: false }, { path: '/profile', label: 'Profile', private: true }, { path: '/logout', label: 'Logout', private: true }, ];

Por defecto, todas las rutas tienen private: false, es decir, son públicas. Solo profile y logout se marcan como private: true.

¿Cómo accede el menú al estado de autenticación?

Para que el menú sepa si el usuario está autenticado, se importa el hook personalizado useAuth [2:52]. Este hook devuelve un objeto auth donde auth.user contiene la información del usuario o null si no hay sesión.

Un detalle importante: el componente del menú debe estar dentro del AuthProvider y del HashRouter [3:26]. Si no está envuelto por estos proveedores, no podrá usar ni useAuth ni componentes de navegación como NavLink o useNavigate.

¿Cuál es el condicional para ocultar rutas privadas?

Dentro del routes.map, en lugar de hacer un return implícito, se agregan llaves para incluir validaciones antes de renderizar [3:50]:

js routes.map(route => { if (route.private && !auth.user) { return null; } return ( // renderizar el enlace normalmente ); });

Si la ruta es privada y no existe auth.user, se devuelve null y el enlace no aparece en el menú [4:28]. Si el condicional no se cumple, significa que la ruta es pública o que el usuario ya está autenticado, así que se renderiza con normalidad.

¿Cómo ocultar rutas públicas cuando ya hay sesión activa?

Aquí viene la segunda parte del problema. Tras hacer login, la página de login sigue visible en el menú [5:27]. Para resolverlo se introduce una nueva propiedad: publicOnly.

js { path: '/login', label: 'Login', private: false, publicOnly: true },

El condicional adicional queda así [6:22]:

js if (route.publicOnly && auth.user) { return null; }

Si la ruta tiene publicOnly: true y el usuario ya tiene sesión, el enlace desaparece del menú. De esta forma, login solo se muestra cuando no hay autenticación.

El resultado final del flujo completo [6:48]:

Sin sesión: aparece login, no aparecen profile ni logout.
Con sesión: aparecen profile y logout, no aparece login.

¿Por qué preguntar cuándo NO renderizar en vez de cuándo sí?

La clave de esta implementación es pensar al revés [7:18]. En lugar de construir un condicional largo que cubra todos los escenarios para renderizar, se pregunta únicamente cuáles son las condiciones para NO renderizar. Si alguna se cumple, se devuelve null. Si ninguna aplica, se renderiza normalmente. Esto produce un código más limpio y legible.

Aún queda un problema por resolver: si el usuario cambia la URL manualmente, puede acceder a rutas que deberían estar protegidas o que ya no corresponden a su estado de sesión [8:06]. Proteger el menú no es suficiente; también hay que proteger las rutas a nivel de navegación con redirects. ¿Cómo lo resolverías tú? Comparte tu enfoque en los comentarios.

Comentarios

Diego Vergara

student•

Mi solución

          if(route.to == '/login' && auth.user){
            return null
          }

Luis Angel Olivárez Estrada

student•

Yo le pondría el "===" triple igual. Porque quizá si tenemos algún login con slug pueda causar error.

Juan Pablo Bahos

student•

Yo también lo hice de esa manera.

Es un poco hardcode pero funciona :)

Jhon Eduard Bocanegra Ortiz

student•

Para que no se pueda entrar directamente con url se debe crear un componente que envuelva las rutas privadas y dependiendo si ya hicieron login renderizarlas o no.

SERGIO SAUL ROJAS VELASQUEZ

student•

como haces este tipo de imagenes?

Brandon Argel Verdeja Domínguez

student•

¡Hola, Sergio! Puedes sacar esas imágenes con la extensión CodeSnap. 😃

Andrés Esteban Rodríguez Jiménez

student•

Menú con rutas públicas y privadas

Ahora vamos a hacer que nuestro menú no muestre los enlaces para hacer es crear las validaciones de si un usuario NO está registrado, no deberíamos mostrar una página de logout o perfil, y si está registrado, entonces no deberíamos mostrar la pestaña de login.

Para esto en nuestro menú debemos validar si tenemos un usuario registrado, o no:

Main.js

/* En cada una de nuestras rutas vamos a crear una nueva propiedad 
que se llame "private" que nos permita validár si cierta secciones 
pública o privada */
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,
});

Teniendo esto ya podemos validar si renderizamos cierto componente o no lo hacemos; vamos entonces a crear la validación que nos permita lograr esto:

function Menu() {
  const auth = useAuth();

  return (
    <nav>
      <ul>

        {/* cambiamos el return inferido por unas llaves y el 
        return  */}
        {routes.map(route => {
          /* Este contenido se va a renderizar solo si se pasa la 
          siguiente validación, si no estamos autenticados y  
          tratamos de entrar a un a ruta privada entonces no vamos a 
          renderizar esa ruta */
          if (route.private && !auth.user) return null

          return (
            <li key={route.to}>
              ...
            </li>
          );
        })}

      </ul>
    </nav>
  );
}

Listo, ahora lo único de nos falta es que cuando estemos registrados, la manera que yo encontré es la siguiente:

function Menu() {
	...
	return (
    <nav>
      <ul>
        {routes.map(route => {
          ...
          /* Validamos si hay un usuario registrado, y si el nombre 
          de la ruta es igual a Login entonces retornamos un "null" */
          if (auth.user && route.text === 'Login') return null

          return (
            <li key={route.to}>
              ...
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

Ahora lo único que nos falta es que no podamos acceder a las rutas por medio de la barra de búsqueda con Hashes, ya que si accedemos a una ruta que no se renderiza la aplicación se rompe.

Ivan González

student•

Para solucionarlo simplemente agregué un segundo condicional después para saber si la ruta es Login y se está autenticado, quedarían así:

if(route.private && !auth.user) return null;
if(route.text === 'Login' && auth.user) return null;

Samuel Miranda Martínez

student•

Amo como explica el profe ❤️❤️❤️

FERNANDO ALBERTO RAMOS MARTINEZ

student•

Hola profe JuanDc por fa cuéntame cual es el curso en donde me enseñan a manejar el sistema de autenticación??? Gracias

Juan Castro

teacher•

Mira:

Alvaro H. Ruiz V.

student•

Excelente!!!!! Bueeenaaa Fernando!

Santiago Pérez Sanabria

student•

Mi solución fue la siguiente:

if ((route.private && !auth.user) || (route?.publicOnly && !!auth.user)) return null;

De esta manera logré aplicar un solo condicional y reutilizar el código ya existente

Jhon Jairo Gomez Calderon

student•

Tenia un poco de dudas del funcionamiento de los return, pero cuando se manejan bien ahorras mucho código.

if (auth.user && route.text ==='Login') return null;

Harold Zurita Simon

student•

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 };

Juan Mercado

student•

My solution

if(auth.user && route.text  === 'Login') return null

Ignacio Basilio

student•

No se si es la mas elegante de las soluciones, pero...

if (auth.user && route.text==="Login") return null

Alarcon Ricardo Ezequiel

student•

Esta fue mi solucion al reto de JuanDC:

{
          routes.map(route => {

            if (route.private && !auth.user) return null

            if (auth.user && route.to.includes('login')) return null


            return (
              <li key={route.to} >
                <NavLink
                  style={({ isActive }) => ({ 
                    color: isActive ? 'red' : 'blue',
                  })}
                  to={route.to}
                  end
                >
                  { route.text}
                </NavLink>
              </li>
            )
          })
        }

Esta opción funcionará siempre y cuando la ruta del login incluya las palabras "login".

Escribiendo esto creo que la opción de Juan tiene mucho más sentido, pero bueno, esa se me ocurrió a mí.

Ing. Moisés Toro

student•

Amo este profe

Sebastian Carballo

student•

English version branch & commit

Branch name:

feat/set-private-routes

Commit message:

git commit -m "feat: implement basic protected route access control

- Add route protection based on authentication state

- Restrict access to sensitive pages for unauthenticated users

- Implement authentication checks in route components

- Add redirection for unauthorized access attempts"

Sebastian Hugo Sanchez

student•

La solución que implementé yo fue:

if(auth.user && route.to.includes("/login")) return null;

Pero la solución de Juan es mucho mas escalable para el futuro en caso de que quiera agregar muchas más rutas que sean sólamente publicas. Excelente!

Nicolás García López

student•

if (route.publicOnly && auth.user) return null;

Gonzalo Gutiérrez Castillo

student•

Mi solución fue agregar un nuevo condicional que valida si hay un usaurio logueado y si su ruta es la de login para evitar su renderización.

if(auth.user && (route.path === '/login')) return null
```if(auth.user && (*route*.path === '/login')) return null

Daniel Alessandro García Batres

student•

Esta es otra forma de hacer el condicional:```js import React from "react"; import { NavLink } from "react-router-dom"; import { useAuth } from "../auth";

function Menu() { const auth = useAuth();

const routes = [ { to: "/", text: "Home", private: false }, { to: "/blog", text: "Blog", private: false }, { to: "/profile", text: "Profile", private: !auth.user }, { to: "/login", text: "Login", private: !!auth.user }, { to: "/logout", text: "Logout", private: !auth.user }, ];

return ( <nav> <ul> {routes.map((route) => { if (route.private) 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 };

Charles Castillo Rosas

student•

Mis apuntes en Notion💚

Remix Zapata

student•

Para solucionar el problema de que pongan la ruta /profile y no haya iniciado sesión, usé esta estrategia:

En ProfilePage.jsx

import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../auth/useAuth';
import { useEffect } from 'react';

export const ProfilePage = () => {
  const { user } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (user === null) return navigate('/login');
  });

  return (
    <div>
      <h3>Profile</h3>
      <p>Welcome, {user?.username}!</p>
    </div>
  );
};

Control de Acceso en Menú con Autenticación React

Fundamentos de navegación en la web

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalación de React Router DOM 6 en un proyecto React

Uso de Hash Router en Aplicaciones Web con React Router DOM

Creación de Rutas Dinámicas con React Router DOM 6

Navegación en React Router: Uso de Link y NavLink

Rutas dinámicas con React Router DOM y useParams

Uso de useNavigate en React Router DOM para navegación dinámica

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

Autenticación y Autorización en Apps con React Router y Hooks