Por lo general, al crear aplicaciones web, las páginas de inicio de sesión se utilizan para proteger las páginas privadas. Por ejemplo, para una plataforma de blogs, es posible que solo los usuarios autenticados puedan acceder al tablero. Si un usuario no autenticado intenta acceder a esa página, la aplicación lo redirige a la página de inicio de sesión. Una vez que inician sesión, obtienen acceso.
En este artículo, veremos cómo puede redirigir a un usuario de una página restringida a una página de inicio de sesión. También discutiremos cómo puede devolver al usuario a la página en la que estaba después de iniciar sesión.
En React Router v6, hay dos formas que puede usar para redirigir a un usuario: el componente Navigate y el usarNavegar() gancho.
Crear una aplicación de reacción
Cree una aplicación React simple usando el crear-reaccionar-app dominio. Utilizará esta aplicación para probar cómo el componente Navigate y el usarNavegar() trabajo de gancho.
npx crear-reaccionar-aplicación reaccionar-redireccionar
Crear una página de inicio de sesión
Deberá crear una página de inicio de sesión para autenticar a los usuarios. Dado que este no es un tutorial de autenticación, utilice una matriz de objetos como base de datos de usuario.
Crear un nuevo archivo en el origen carpeta y asígnele un nombre Iniciar sesión.js. Luego agregue el siguiente código, para crear el formulario de inicio de sesión.
importar { estado de uso } de "reaccionar";
importar Tablero de "./Tablero";
constante Iniciar sesión = () => {
const [nombre de usuario, setusername] = useState("");
const [contraseña, establecer contraseña] = useState("");
constante [autenticado, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| falso));
usuarios constantes = [{ nombre de usuario: "jane", clave: "contraseña de prueba" }];
constante handleSubmit = (e) => {
mi.preventDefault()
constante cuenta = usuarios.find((usuario) => usuario.nombre de usuario nombre de usuario);
si (cuenta && cuenta.contraseña contraseña) {
establecerautenticado(verdadero)
almacenamiento local.setItem("autenticado", verdadero);
}
};
devolver (
<división>
<pags>Bienvenido de nuevo</pags>
<formulario onSubmit={handleSubmit}>
<aporte
tipo ="texto"
nombre="Nombre de usuario"
valor={nombre de usuario}
enCambio={(e) => setusername (e.objetivo.valor)}
/>
<aporte
tipo ="clave"
nombre="Clave"
enCambio={(e) => establecer contraseña (e.target.value)}
/>
<tipo de entrada ="enviar" valor="Enviar" />
</form>
</div>
)
};
}
exportardefecto Acceso;
Este es un formulario de inicio de sesión simple. Cuando un usuario envía su nombre de usuario y contraseña, se comparan con la matriz. Si estos detalles son correctos, el estado autenticado se establece en verdadero. Dado que verificará si el usuario está autenticado en el componente Panel, también debe almacenar el estado de autenticación en algún lugar al que puedan acceder otros componentes. Este artículo utiliza almacenamiento local. En una aplicación real, usando Reaccionar contexto sería una mejor opción.
Crear una página de panel
Agregue el siguiente código en un nuevo archivo llamado Tablero.js.
constante Tablero = () => {
devolver (
<división>
<pags>Bienvenido a tu Tablero</pags>
</div>
);
};
exportardefecto Tablero;
El tablero solo debe ser accesible para usuarios autenticados. Por lo tanto, cuando los usuarios visiten la página del panel, primero verifique si están autenticados. Si no lo están, rediríjalos a la página de inicio de sesión.
Para hacer esto, primero configure las rutas de la aplicación usando el enrutador React.
npm Instalar en pc reaccionar-enrutador-dom
En index.js, configure el enrutamiento para su aplicación.
importar Reaccionar de "reaccionar";
importar ReactDOM de "reaccionar-dom/cliente";
importar aplicación de "./Aplicación";
importar { NavegadorRouter, Ruta, Rutas } de "reaccionar-router-dom";
importar Acceso de "./Acceso";
importar Tablero de "./Tablero";
constante root = ReactDOM.createRoot(documento.getElementById("raíz"));
raíz.prestar(
<Reaccionar. Modo estricto>
<NavegadorRouter>
<Rutas>
<Elemento de índice de ruta={<aplicación />} />
<Ruta ruta ="acceso" elemento={<Acceso />} />
<Ruta ruta ="tablero" elemento={<Tablero />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Proteger la página del panel
Ahora que las rutas de su aplicación están configuradas, el siguiente paso es hacer que la ruta del tablero sea privada. Cuando se carga el componente Dashboard, el estado de autenticación se recupera del almacenamiento local y se almacena en el estado. Si el usuario no está autenticado, la aplicación lo redirigirá a la página de inicio de sesión; de lo contrario, mostrará la página del panel.
importar { usarEfecto, usarEstado } de "reaccionar";
constante Tablero = () => {
constante [autenticado, setautenticado] = useState(nulo);
usarEfecto(() => {
const usuarioIngresado = localStorage.getItem("autenticado");
si (usuario registrado) {
setauthenticated (loggedInUser);
}
}, []);
si (! autenticado) {
// Redirigir
} más {
devolver (
<división>
<pags>Bienvenido a tu Tablero</pags>
</div>
);
}
};
exportardefecto Tablero;
Redirigir al usuario a la página de inicio de sesión mediante Navigate
El componente Navigate reemplazó al componente Redirect que se usó en React Router v5. Importar Navegar desde react-router-dom.
importar { Navegar } de "reaccionar-router-dom";
Para redirigir a los usuarios no autenticados, utilícelo de la siguiente manera.
si (! autenticado) {
devolver <Navegar reemplazar a ="/login" />;
} más {
devolver (
<división>
<pags>Bienvenido a tu Tablero</pags>
</div>
);
}
El componente Navigate es una API declarativa. Se basa en un evento de usuario, que en este caso es la autenticación para provocar un cambio de estado y, en consecuencia, provocar una nueva representación del componente. Tenga en cuenta que no tiene que usar la palabra clave replace. Su uso reemplaza la URL actual en lugar de enviarla al historial del navegador.
Redirigir al usuario a otra página usando useNavigate()
La otra opción para realizar redirecciones en React es la usarNavegar() gancho. Este enlace proporciona acceso a la API imperativa de navegación. Comience importándolo desde react-router-dom.
importar { usar Navegar } de "reaccionar-router-dom";
Redirigir una vez que el usuario se haya autenticado con éxito en el manejarEnviar() funcionar así:
constante navegar = usarNavegar();
constante Iniciar sesión = () => {
constante navegar = usarNavegar();
const [nombre de usuario, setusername] = useState("");
const [contraseña, establecer contraseña] = useState("");
constante [autenticado, setautenticado] = useState(
almacenamiento local.getItem (almacenamientolocal.getItem("autenticado") || falso)
);
usuarios constantes = [{ nombre de usuario: "jane", clave: "contraseña de prueba" }];
constante handleSubmit = (e) => {
mi.preventDefault();
constante cuenta = usuarios.find((usuario) => usuario.nombre de usuario nombre de usuario);
si (cuenta && cuenta.contraseña contraseña) {
almacenamiento local.setItem("autenticado", verdadero);
navegar("/dashboard");
}
};
devolver (
<división>
<formulario onSubmit={handleSubmit}>
<aporte
tipo ="texto"
nombre="Nombre de usuario"
valor={nombre de usuario}
enCambio={(e) => setusername (e.objetivo.valor)}
/>
<aporte
tipo ="clave"
nombre="Clave"
enCambio={(e) => establecer contraseña (e.target.value)}
/>
<tipo de entrada ="enviar" valor="Enviar" />
</form>
</div>
);
};
En este ejemplo, una vez que el usuario envía el formulario con los detalles correctos, se le redirige al panel.
Al crear aplicaciones, uno de los objetivos es brindar a los usuarios la mejor experiencia. Puede hacer esto devolviendo al usuario a la página en la que estaba antes, redirigiéndolo a la página de inicio de sesión. Puede hacer esto pasando -1 para navegar así, navegar(-1). Actúa de la misma manera que presionar el botón Atrás en su navegador.
Enrutamiento en React
En este artículo, aprendió cómo puede redirigir a un usuario a otra página en React usando tanto el componente Navigate como el usarNavegar() gancho. El artículo utilizó un formulario de inicio de sesión para demostrar cómo puede redirigir a los usuarios no autenticados desde una página protegida a la página de inicio de sesión.
