#LemonCode – React Router y rutas autorizadas (I)

Buy Me A Coffee

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:

Read the complete article here

¿Con ganas de ponerte al día?

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.