DEV Community

Cover image for Cómo Crear Rutas Protegidas con React y React Router DOM
Jose Germán Martínez
Jose Germán Martínez

Posted on

Cómo Crear Rutas Protegidas con React y React Router DOM

Cuando construimos aplicaciones web con React, a menudo necesitamos limitar el acceso a ciertas rutas, permitiendo que solo usuarios autenticados puedan acceder a ellas. En este post, te explicaré cómo crear rutas protegidas utilizando React, react-router-dom y el componente Outlet. Además, te mostraré cómo validar si el usuario es administrador a partir de un valor almacenado en el localStorage.

¿Qué es una ruta protegida?

Una ruta protegida es una página que solo puede ser accesada si el usuario cumple con ciertos criterios, como estar autenticado o tener ciertos permisos (por ejemplo, ser administrador). En caso de no cumplir con estos requisitos, el usuario es redirigido a otra página, como la de inicio de sesión.

Requisitos previos
Antes de comenzar, asegúrate de tener:

  • React configurado en tu proyecto.
  • react-router-dom instalado:
npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

El ejemplo: Rutas protegidas con validación de administrador.

En este ejemplo, validaremos si el usuario está autenticado como administrador revisando un valor en el localStorage. Si no es administrador, lo redirigiremos a la página de inicio de sesión.

  • Configuración del Router.

Primero, configuramos las rutas principales de la aplicación.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import ProtectedRoute from "./ProtectedRoute";

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

export default App;
Enter fullscreen mode Exit fullscreen mode
  • Crear el componente ProtectedRoute.

Este componente valida si el usuario está autenticado como administrador antes de renderizar la ruta protegida. Si no lo está, será redirigido a la página de inicio de sesión.

import React from "react";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  // Verificar si el usuario es admin desde el localStorage
  const isAdmin = localStorage.getItem("role") === "admin";

  return isAdmin ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoute;

Enter fullscreen mode Exit fullscreen mode

Explicación del código:

localStorage.getItem("role"): Obtiene el rol del usuario almacenado en el localStorage.
Si el rol es "admin", renderiza el componente Outlet, que representa el contenido de las rutas protegidas.
Si no, redirige al usuario a la ruta de inicio (/) utilizando el componente Navigate.

  • Crear la página de inicio de sesión (Login) Esta página simula un inicio de sesión básico y guarda el rol del usuario en el localStorage.
import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Simular un inicio de sesión y guardar el rol del usuario
    localStorage.setItem("role", "admin");
    navigate("/dashboard");
  };

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Página de Inicio de Sesión</h1>
      <button onClick={handleLogin}>Iniciar sesión como Admin</button>
    </div>
  );
}

export default Login;
Enter fullscreen mode Exit fullscreen mode
  • Crear el Dashboard.

El Dashboard será la ruta protegida a la que solo pueden acceder los usuarios con el rol de administrador.

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

function Dashboard() {
  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Dashboard (Solo para Admins)</h1>
      <nav>
        <Link to="stats" style={{ margin: "0 10px" }}>Estadísticas</Link>
        <Link to="settings" style={{ margin: "0 10px" }}>Configuración</Link>
      </nav>

      <Routes>
        <Route path="stats" element={<h2>Sección de Estadísticas</h2>} />
        <Route path="settings" element={<h2>Sección de Configuración</h2>} />
      </Routes>
    </div>
  );
}

export default Dashboard;
Enter fullscreen mode Exit fullscreen mode

Flujo del ejemplo

El usuario accede a la aplicación:

Si no ha iniciado sesión, verá la página de inicio de sesión (/).
Al iniciar sesión como administrador, se guarda el rol en el localStorage y se redirige al Dashboard (/dashboard).
En el Dashboard, se muestra contenido protegido (Estadísticas y Configuración).

Si el usuario intenta acceder directamente al Dashboard sin ser administrador, será redirigido automáticamente al inicio de sesión.

Las rutas protegidas son esenciales para aplicaciones que manejan usuarios y permisos. Utilizando React Router DOM, el componente Outlet y valores almacenados en el navegador como el localStorage, podemos implementar un sistema básico para restringir el acceso. Este enfoque es ideal para aplicaciones pequeñas o de aprendizaje, pero siempre es recomendable usar una solución de autenticación más robusta en proyectos grandes.

¿Tienes preguntas? ¡Déjame tus comentarios! 😊

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay