React, Private Routes

Si estamos haciendo una pagina web en React y tiene un Login seguramente queramos que solo los usuarios registrados puedan acceder a ciertas partes de la pagina, en React existe una solución bastante sencilla y eficaz, Private Route.

Las rutas privadas son componentes Route en los cuales comprobamos si el usuario se ha autentificado antes, de lo contrario será redirigido donde nosotros queramos.

Para implementar React, Private Routes tendríamos que tener montado el login, si no lo tenemos todavía recomiendo el uso de JWT(Json Web Token) para autentificar a los usuarios:

https://jwt.io/

Una vez tengamos montado el backend con JWT, desde react tendríamos que guardar el Token para poder usarlo en las rutas privadas, en mi caso como uso redux mi action seria el siguiente:

 

Para comprobar que ha funcionado bien podéis iros al navegador y desde la ventana de desarrollador ver el token guardado:

Ahora vamos con nuestra ruta privada, lo primero de todo es tener instalado ‘react-router-dom’ en nuestro proyecto:

npm install –save react-router-dom

Una vez instalado podemos ir al package.json para comprobar que se ha instalado correctamente:

Ya podemos crear nuestro componente en el proyecto:

Y su código seria el siguiente:

Si utilizásemos redux seria así:




En base lo que hacemos es crear un componente Route y antes de redirigir a la ruta comprobamos si el usuario se ha identificado, si no, lo enviamos al login para que lo haga, sencillo.

Por último nos vamos al fichero donde tengamos las rutas y añadimos nuestro nuevo componente:

Con esto ya tendríamos montado nuestra Private Route totalmente funcional y aportándole a nuestra web una capa mas de seguridad.