Cómo proteger rutas privadas en React

Cuando desarrollamos una aplicación web con React, no todas las páginas deberían estar disponibles para cualquier usuario. Por ejemplo, un dashboard, el perfil de usuario o una sección administrativa pueden requerir que la persona haya iniciado sesión previamente.

Para solucionar esto podemos crear rutas privadas, también conocidas como Private Routes, utilizando React Router y un sistema de autenticación.

1. Instalar React Router

Si todavía no lo tienes instalado, puedes agregarlo con:

npm install react-router-dom

Después podemos configurar nuestras rutas:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

El problema es que, con esta configuración, cualquier persona podría acceder directamente a /dashboard.

2. Crear un componente PrivateRoute

Podemos crear un componente encargado de comprobar si existe una sesión activa:

import { Navigate } from "react-router-dom";

function PrivateRoute({ children }) {
  const token = localStorage.getItem("token");

  if (!token) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

export default PrivateRoute;

Aquí consultamos si existe un token almacenado. Si no existe, el usuario es enviado automáticamente a la página de inicio de sesión.

3. Proteger nuestras rutas

Ahora podemos utilizar PrivateRoute alrededor de las páginas que necesitan autenticación:

<Routes>
  <Route path="/login" element={<Login />} />

  <Route
    path="/dashboard"
    element={
      <PrivateRoute>
        <Dashboard />
      </PrivateRoute>
    }
  />
</Routes>

De esta manera, solamente los usuarios que tengan un token podrán acceder al dashboard.

4. ¿Qué ocurre con JWT?

En aplicaciones reales normalmente utilizamos JWT (JSON Web Token). Después de iniciar sesión correctamente, el backend puede devolver un token que React utilizará para identificar al usuario en las siguientes peticiones.

Por ejemplo:

localStorage.setItem("token", response.token);

Posteriormente, ese token puede enviarse al backend mediante el encabezado Authorization:

fetch("/api/productos", {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

5. Una protección importante

Es importante entender que proteger una ruta en React no sustituye la seguridad del backend. Un usuario puede manipular el navegador o realizar peticiones directamente a la API.

Por eso, el servidor también debe validar el JWT y comprobar los permisos del usuario antes de devolver información o ejecutar operaciones.

Conclusión

Las rutas privadas permiten mejorar la seguridad y experiencia de navegación de una aplicación React. Una arquitectura común consiste en combinar React Router + JWT + un sistema de autenticación en el backend, creando una aplicación donde cada usuario solamente pueda acceder a los recursos que le corresponden.