Las rutas protegidas son aquellas rutas que solo otorgan acceso a usuarios autorizados. Esto significa que los usuarios primero deben cumplir con ciertas condiciones antes de acceder a esa ruta específica. Por ejemplo, su aplicación puede requerir que solo los usuarios registrados puedan visitar la página del panel.

En este tutorial, aprenderá cómo crear rutas protegidas en una aplicación React.

Tenga en cuenta que utilizará React Router v6, que es un poco diferente de las versiones anteriores.

Empezando

Para empezar, utilice crear-reaccionar-app para iniciar una aplicación React simple.

npx crear-reaccionar-aplicación proteger-rutas-reaccionar

Navegue a la carpeta que acaba de crear e inicie su aplicación.

cd proteger-rutas-reaccionar
inicio de npm

Abra la carpeta de su aplicación con su editor de texto preferido y límpielo. Tu aplicación.js debería verse así.

aplicación de función () {
 regreso ;
}
exportar la aplicación predeterminada;

Ahora está listo para configurar las rutas.

Relacionados: Cómo crear su primera aplicación React con JavaScript

Configuración del enrutador React

Utilizará React Router para configurar la navegación de su aplicación.

Instalar en pc reaccionar-enrutador-dom.

npm instalar reaccionar-enrutador-dom

Para esta aplicación, tendrá tres páginas principales:

• Página de inicio (la página de destino).
• Página de perfil (protegida, por lo que solo los usuarios registrados tienen acceso).
• Acerca de la página (pública para que cualquiera pueda acceder a ella).

En Navbar.js, utilizar el Enlace componente de reaccionar-enrutador-dom para crear los enlaces de navegación a varias rutas.

const {Enlace} = require("react-router-dom");
barra de navegación const = () => {
 regreso (

 );
};
exportar la barra de navegación predeterminada;

En aplicación.js cree las rutas que coincidan con los enlaces en el menú de navegación.

import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
importar barra de navegación desde "./Navbar";
importar Inicio desde "./Inicio";
importar perfil desde "./Perfil";
importar Acerca de desde "./Acerca de";
aplicación de función () {
 regreso (



} />
} />
} />


 );
}
exportar la aplicación predeterminada;

Ahora necesita crear los componentes a los que ha hecho referencia en App.js.

En Inicio.js:

constante Inicio = () => {
 regreso 
página de inicio
;
};
exportar Inicio predeterminado;

En Perfil.js

const Perfil = () => {
 regreso 
Página de perfil
;
};
exportar perfil predeterminado;

En Acerca de.js

const Acerca de = () => {
 regreso 
Acerca de la página
;
};
exportar por defecto Acerca de;

Creación de rutas protegidas en React

El siguiente paso es crear rutas protegidas. los casa y sobre Las rutas son públicas, lo que significa que cualquiera puede acceder a ellas, pero la ruta del perfil requiere que los usuarios se autentiquen primero. Por lo tanto, debe crear una forma de iniciar sesión para los usuarios.

Configuración de autenticación falsa

Dado que este no es un tutorial de autenticación, utilizará React Gancho useState para simular un sistema de inicio de sesión.

En App.js, agregue lo siguiente.

importar {Rutas, Ruta, BrowserRouter} desde "react-router-dom";
importar { useState } de "reaccionar";
// Otras declaraciones de importación
aplicación de función () {
 const [isLoggedIn, setisLoggedIn] = useState (nulo);
 const iniciar sesión = () => {
 setisLoggedIn (verdadero);
 };
 const cerrar sesión = () => {
 setisLoggedIn (falso);
 };
 regreso (


 {está conectado? (
Cerrar sesión
 ): (
Acceso
 )}



 );
}
exportar la aplicación predeterminada;

Aquí, está rastreando el estado de inicio de sesión del usuario que usa el estado. Tiene dos botones, el inicio de sesión y el botón de cierre de sesión. Estos botones se representan a su vez dependiendo de si un usuario ha iniciado sesión o no.

Si el usuario está desconectado, se muestra el botón de inicio de sesión. Al hacer clic en él, se activará la función de inicio de sesión que actualizará el está conectado estado a verdadero y, a su vez, la pantalla desde el inicio de sesión hasta el botón de cierre de sesión.

Relacionados: ¿Qué es la autenticación de usuario y cómo funciona?

Protección de componentes privados

Para proteger las rutas, los componentes privados también deben tener acceso a la está conectado valor. Puede hacer esto creando un nuevo componente que acepte el está conectado el estado como utilería y el componente privado como hijo.

Por ejemplo, si su nuevo componente se llama "Protegido", renderizaría un componente privado como este.

El componente Protegido comprobará si está conectado es verdadero o falso. Si es cierto, seguirá adelante y devolverá el componente privado. Si es falso, redirigirá al usuario a una página donde podrá iniciar sesión.

Obtenga más información sobre otras formas que puede usar para renderizar un componente dependiendo de las condiciones de este artículo en representación condicional en React.

En su aplicación, cree Protegido.js.

importar {Navegar} desde "react-router-dom";
const Protegido = ({ isLoggedIn, children }) => {
 si (! está conectado) {
 regreso ;
 }
 niños devueltos;
};
exportación por defecto Protegido;

En este componente, la instrucción if se usa para verificar si el usuario está autenticado. Si no lo son, Navegar desde reaccionar-enrutador-dom los redirige a la página de inicio. Sin embargo, si el usuario está autenticado, se representa el componente secundario.

Utilizar Protegido.js en App.js modificar el Perfil ruta de la página.

 ruta="/perfil"
 elemento={



 }
/>

Aplicación.js debería verse así.

importar {Rutas, Ruta, BrowserRouter} desde "react-router-dom";
importar { useState } de "reaccionar";
importar barra de navegación desde "./Navbar";
importar Protegido de "./Protegido";
importar Inicio desde "./Inicio";
importar Acerca de desde "./Acerca de";
importar perfil desde "./Perfil";
aplicación de función () {
 const [isLoggedIn, setisLoggedIn] = useState (nulo);
 const iniciar sesión = () => {
 setisLoggedIn (verdadero);
 };
 const cerrar sesión = () => {
 setisLoggedIn (falso);
 };
 regreso (




 {está conectado? (
Cerrar sesión
 ): (
Acceso
 )}

} />
 elemento={



 }
 />
} />





 );
}
exportar la aplicación predeterminada;

Eso es todo sobre la creación de rutas protegidas. Ahora puede acceder a la página Perfil solo si ha iniciado sesión. Si intenta navegar a la página de perfil sin iniciar sesión, será redirigido a la página de inicio.

Control de acceso basado en roles

Este tutorial le mostró cómo puede restringir el acceso de usuarios no autenticados a una página en una aplicación React. En algunos casos, es posible que deba ir más allá y restringir a los usuarios según sus funciones. Por ejemplo, puede tener una página que diga una página de análisis que solo otorgue acceso a los administradores. Aquí, deberá agregar lógica en el componente Protegido que verifique si un usuario cumple con las condiciones requeridas.

Cómo implementar la representación condicional en React.js (con ejemplos)

La representación condicional es una forma útil de mejorar su aplicación. Aquí hay una selección de formas de usarlo.

Leer siguiente

Sobre el Autor