Control de Acceso en Menú con Autenticación React

¿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:

1. 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!