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
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;
- 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;
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;
- 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;
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! 😊
Top comments (0)