Rutas públicas y privadas en React

Foto de Connor Danylenko en Pexels

Autenticar usuarios es una de las funcionalidades más básicas y necesarias al construir cualquier aplicación web/mobile/etc. Al tener una autenticación debemos tener un acceso privado a rutas que alguien que no tiene una sesión activa no pueda ver.

Cuando trabajamos con React logramos encontrar multiples soluciones para estructurar nuestras rutas: colocar todo en el index.js, crear archivo routes.js, crear una carpeta para manejar las rutas alli… y cantidad de estructuras mas.

Lo que puedo recomendar es trabajar con el que te sientas cómodo o se sientan cómodos (si estás trabajando en un equipo).

En esta ocación vamos a trabajar con nested routes (rutas anidadas), que consiste básicamente en crear una carpeta con algunos archivos de js, en esta carpeta vamos a manejar todo el enrutamiento de nuestra aplicación.

Con el tiempo he atravezado ‘Los sotanos del infierno’ tratando de crear una gestión de rutas optimo, escalable y en el que me sienta cómodo. A continuacióm voy a mostrarles el que me ha funcionado muy bien.

Cómo no es un post de diseño, no voy a diseñar nada con css u otra librería, vamos a ser sencillos.

Empezamos por el inicio:

npx create-react-app nested-routes
cd nested-routes
yarn start

Esto abre automaticamente la url http://localhost:3000/

Creamos 2 folders pages y

# páginas de nuestra aplicación
mkdir src/pages
# dónde guardaremos nuestra configuración de las rutas 
mkdir src/router

Antes que nada debemos crear nuestras páginas:

Pages

Actualmente tenemos 3 páginas:

• LoginPage: página de inicio en dónde deberíamos tener el formulario de login, esta página es pública.
• DashboardPage: página privada, dónde se muestran datos de la aplicación para usuarios logueados
• ProfilePage: otra página privada.

Ahora vamos a instalar y configurar react-router-dom, desde lo básico

yarn add react-router-dom

Vamos a editar el archivo App.js con el siguiente código:

Este archivo es el ejemplo básico que está en la web de react-router-dom (https://reactrouter.com/web/guides/quick-start).

Importamos nuestras páginas y configuramos el router. Al guardar nuestro archivo, vemos en el navegador lo siguiente (los estilos se los debo)

http://localhost:3000/

Ya tenemos react router configurado. Si avegamos por los links vemos que algunas rutas privadas son públicas, esto no debería pasar cuando tenemos un sistema de autenticación de usuarios.

Vamos a organizar esto, para ello nos vamos a crear en la carpeta router el siguiente archivo routes.js

En este archivo vemos un objeto que contiene los niveles de acceso que queremos dentro de nuestra app, en este caso tenemos 2, private y public. Dentro de cada nivel de acceso tenemos un array con las rutas que queremos que sean privadas o públicas.

Lo que sigue ahora es crear un componente personalizado para renderizar las rutas privadas. Si el usuario tiene una sesión activa, entonces renderiza la página si no, mostrará un mensaje de error y lo redirijirá a login.

Creamos un archivo dentro de router llamado types.js

Nota: usamos localStorage a manera de ejemplo, no deberías usar localStorage de esta manera, es inseguro mi pez. En lugar de localStorage puedes usar redux o sessión storage, en lo que te sientas cómodo.

Ahora vamos a crear un archivo index.js dentro de la misma carpeta routes

En este archivo configuramos react-router como lo habíamos hecho en App.js pero en esta ocasión ya tenemos una organización de nuestras rutas. Usamos el componente PrivateRoute para renderizar las rutas privadas.

Ya terminamos la configuración pero no vemos nada, falta editar el Archivo App.js

Ahora si intentamos entrar al dashboard o al profile nos va a salir un error y nos llevará al login.

Si quieren esconder links privados, tendran que hacerlo de la siguiente manera:

{localStorage.getItem("isAuth") === "true" && (
  <li>
    <Link to="/dashboard">Dashboard</Link>
  </li>
)}

Recuerden cambiar el localStorage por lo que estén usando (hooks, redux, sessionStorage, etc)

El link del repositorio: https://github.com/bacabange/private-routes