Introducción

Cuando trabajamos creando aplicaciones SPA con React, el router por excelencia es React-Router-DOM, es fácil de usar, potente y versátil.

Uno de los escenarios que nos podemos encontrar en nuestra aplicación es el de manejar rutas de dos tipos:

Rutas públicas: es decir páginas en las que el usuario no tiene porque haber introducido su usuario y clave (por ejemplo la propia página de login).
Rutas privadas: para poder acceder a estas rutas el usuario ha tenido que hacer login con éxito previamente.

En esta serie de posts vamos a ver cómo manejar esto aplicando una solución simple que nos evite estar copiando y pegando código en cada página.

Nota: los ejemplos en este post están desarrollados usando TypeScript, en la sección de recursos encontrarás la versión ES6 del mismo.

TL;DR;

En este post resolvemos dos problemas:

Donde guardar la información de sesión usuario, para ello utilizaremos el contexto de React.
Cómo redirigir a la ventana de login si el usuario intenta acceder a una página que necesita previa autenticación, para ello crearemos un wrapper para nuestras rutas.

Aquí tienes un ejemplo que implementa la solución que vamos a detallar en este post:

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

Si tienes ganas de ponerte al día con Front End (ES6, Typescript, React, Angular, Vuejs…) te recomendamos nuestros Máster Front End: https://lemoncode.net/master-frontend#inicio-banner
Si te quieres poner al día en Backend (stacks .net y nodejs), te aconsejamos nuestro Bootcamp Backend: https://lemoncode.net/bootcamp-backend#bootcamp-backend/banner
Y si tienes ganas de meterte con Docker, Kubernetes, CI/CD…, tenemos nuestro Bootcamp Devops: https://lemoncode.net/bootcamp-devops#bootcamp-devops/inicio