logo
contacto@lagahe.com
+(34) 967 10 14 30
+(34) 610 74 57 87
Parque Empresarial Campollano
Avenida Cuarta, número 3 - 02007 Albacete

React, Private Routes - Lagahe
60357
single,single-post,postid-60357,single-format-standard,qode-core-1.0,ajax_fade,page_not_loaded,,pitch-ver-1.1, vertical_menu_with_scroll,smooth_scroll,side_menu_slide_from_right,grid_1300,blog_installed,wpb-js-composer js-comp-ver-4.8.0.1,vc_responsive
React, Private Routes

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:

Action

 

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

token

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:

package.json

Ya podemos crear nuestro componente en el proyecto:

private route

Y su código seria el siguiente:

Private Route no redux

Si utilizásemos redux seria así:


Private Route

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:

Render Private Route

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

Dani Cebrián Tarancón Sobre el autor

Nací en un pequeño pueblo de la mancha y mi camino me ha llevado por Cheste, Valencia y Albacete, amante de la tecnología, elegí la programación aunque no he dejado de lado mis otras pasiones como el cine, la robótica y la domótica. El 50% de mi cuerpo esta hecho de películas.

¿Te ha gustado nuestro artículo?

Si quieres recibir las novedades más creativas del mundo online, suscríbete a nuestra newsletter.

* indica obligatorio

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/22/d318122530/htdocs/lagahe/wp-includes/class-wp-comment-query.php on line 399
No hay comentarios

Deja un comentario:

Una cookie o galleta informática es un pequeño archivo de información que se guarda en su navegador cada vez que visita nuestra página web.

La utilidad de las cookies es guardar el historial de su actividad en nuestra página web, de manera que, cuando la visite nuevamente, ésta pueda identificarle y configurar el contenido de la misma en base a sus hábitos de navegación, identidad y preferencias.

Las cookies pueden ser aceptadas, rechazadas, bloqueadas y borradas, según desee. Ello podrá hacerlo mediante las opciones disponibles en la presente ventana o a través de la configuración de su navegador, según el caso.

En caso de que rechace las cookies no podremos asegurarle el correcto funcionamiento de las distintas funcionalidades de nuestra página web.

Más información en el apartado POLÍTICA DE COOKIES de nuestra página web.