Control de Acceso en Menú con Autenticación React

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

Resumen

¿Cómo se mejora la navegación dependiendo del estado de autenticación?

Cuando construyes aplicaciones web uno de los pasos cruciales es manejar la autenticación y autorización de manera adecuada. En esta sesión, nos centramos en mejorar la navegación de nuestra aplicación para que se adapte al estado del usuario: si están autenticados o no. Esto asegura que los usuarios solo vean las rutas y páginas pertinentes según su sesión actual.

¿Qué error corregimos al ajustar las rutas?

En la clase anterior, desarrollamos un sistema básico de autenticación que, aunque funcional, presentaba un error de navegación. El objetivo aquí es asegurarnos de que nuestro menú no muestre opciones de acceso o cierre de sesión inconsistentemente. Queremos que, por ejemplo, la opción para "inicio de sesión" desaparezca si el usuario ya ha iniciado sesión, y que la opción de "perfil" no sea visible si el usuario no está autenticado. Aquí está la solución:

Agregar propiedad 'private' a las rutas:
- Todas las rutas deberían tener por defecto la propiedad private: false.
- Se exceptúan rutas como el perfil, que deberían ser marcadas como private: true para que el sistema sea capaz de no mostrar estas páginas si el usuario no está autenticado.

¿Cómo controlar la visibilidad de las rutas privadas?

Para hacer un seguimiento del estado de sesión del usuario, utilizamos un React Hook conocido como useAuth. Este nos proporciona información vital de si el usuario actualmente está loggeado, lo que nos permite condicionar la renderización de las rutas según este estado.

import { useAuth } from './useAuth';

// En el componente de menú
if (route.private && !auth.user) {
    return null;
}

Funciones del Hook useAuth:
- auth.user: este objeto contiene información del usuario si está loggeado y es null de lo contrario.
- Gracias a esto podemos prevenir la renderización de rutas privadas cuando no hay un usuario autenticado.

¿Cómo mejoramos la lógica para las rutas públicas?

Una vez manejadas las rutas privadas, lo siguiente es no mostrar las rutas como el login si el usuario ya está autenticado. Para esto, etiquetamos estas rutas como publicOnly, lo que además hace que no se rendericen si el usuario ya está en el sistema.

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

Esto asegura que si el usuario ya se encuentra autenticado, las páginas destinadas al registro o inicio de sesión no sean visibles.

¿Qué más podemos optimizar?

La implementación también contempla la posibilidad de añadir lógica adicional para manejar estados inconsistentes donde el usuario cambia manualmente la URL para acceder a rutas que deberían estar protegidas de acuerdo a su estado de autenticación. Este manejo, por supuesto, requiere configuraciones adicionales en el servidor backend para ser completamente seguro.

Emplear estas prácticas no solo brinda una mejor experiencia de usuario, sino que también ayuda a mantener la integridad y seguridad de nuestra aplicación. ¡Ahora, te animo a implementar y ajustar estas prácticas a tus proyectos actuales o futuros!

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

https://github.com/SebaMat3/react-router-course-p1/tree/feat/set-private-routes

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