Le rotte protette sono quelle rotte che concedono l'accesso solo agli utenti autorizzati. Ciò significa che gli utenti devono prima soddisfare determinate condizioni prima di accedere a quel percorso specifico. Ad esempio, la tua applicazione può richiedere che solo gli utenti che hanno effettuato l'accesso possano visitare la pagina del dashboard.

In questo tutorial imparerai come creare percorsi protetti in un'applicazione React.

Tieni presente che utilizzerai React Router v6, che è leggermente diverso dalle versioni precedenti.

Iniziare

Per iniziare, usa creare-reagire-app per avviare una semplice applicazione React.

npx create-react-app protect-routes-react

Passa alla cartella che è stata appena creata e avvia la tua applicazione.

cd protect-routes-react
inizio npm

Apri la cartella dell'applicazione con il tuo editor di testo preferito e puliscilo. Il tuo app.js dovrebbe assomigliare a questo.

funzione App() {
 Restituzione ;
}
esporta l'app predefinita;

Ora sei pronto per impostare i percorsi.

Imparentato: Come creare la tua prima app React con JavaScript

Configurazione del router React

Utilizzerai React Router per configurare la navigazione per la tua applicazione.

Installare reagire-router-dom.

npm install react-router-dom

Per questa applicazione, avrai tre pagine principali:

• Pagina iniziale (la pagina di destinazione).
• Pagina del profilo (protetta, quindi solo gli utenti che hanno effettuato l'accesso hanno accesso).
• Pagina Informazioni (pubblica in modo che chiunque possa accedervi).

Nel Navbar.js, Usa il Collegamento componente da reagire-router-dom per creare i collegamenti di navigazione ai vari percorsi.

const { Link } = require("react-router-dom");
const Navbar = () => {
 Restituzione (

 );
};
esporta la barra di navigazione predefinita;

Nel app.js creare i percorsi corrispondenti ai collegamenti nel menu di navigazione.

import { BrowserRouter as Router, Routes, Route } da "react-router-dom";
importa Navbar da "./Navbar";
importa Casa da "./Casa";
importa Profilo da "./Profilo";
importa Informazioni da "./Informazioni";
funzione App() {
 Restituzione (



} />
} />
} />


 );
}
esporta l'app predefinita;

Ora devi creare i componenti a cui hai fatto riferimento UNpp.js.

Nel Home.js:

const Home = () => {
 Restituzione 
Pagina iniziale
;
};
esportazione predefinita Home;

Nel Profile.js

const Profilo = () => {
 Restituzione 
Pagina profilo
;
};
esporta profilo predefinito;

Nel About.js

const Informazioni = () => {
 Restituzione 
Informazioni sulla pagina
;
};
esportazione predefinita Informazioni su;

Creazione di rotte protette in React

Il prossimo passo è la creazione di percorsi protetti. Il casa e di i percorsi sono pubblici, il che significa che chiunque può accedervi, ma il percorso del profilo richiede che gli utenti siano prima autenticati. Pertanto, è necessario creare un modo per accedere agli utenti.

Impostazione dell'autenticazione falsa

Poiché questo non è un tutorial di autenticazione, utilizzerai React useState hook per simulare un sistema di login.

Nel UNpp.js, aggiungi quanto segue.

import {Rotte, Rotte, BrowserRouter} da "react-router-dom";
importa {useState} da "reagire";
// Altre dichiarazioni di importazione
funzione App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (vero);
 };
 const logOut = () => {
 setisLoggedIn (falso);
 };
 Restituzione (


 {è loggato? (
Disconnettersi
 ): (
Login
 )}



 );
}
esporta l'app predefinita;

Qui stai monitorando lo stato di accesso dell'utente utilizzando lo stato. Hai due pulsanti, il login e il pulsante di disconnessione. Questi pulsanti vengono visualizzati a turno a seconda che un utente sia connesso o meno.

Se l'utente è disconnesso, viene visualizzato il pulsante di accesso. Cliccandoci sopra si attiverà la funzione di login che aggiornerà il file isLoggedIn stato a true e, a sua volta, la visualizzazione dal pulsante di accesso al pulsante di disconnessione.

Imparentato: Che cos'è l'autenticazione utente e come funziona?

Protezione dei componenti privati

Per proteggere i percorsi, anche i componenti privati ​​devono avere accesso al isLoggedIn valore. Puoi farlo creando un nuovo componente che accetti il isLoggedIn lo stato come oggetto di scena e la componente privata da bambino.

Ad esempio, se il tuo nuovo componente è denominato "Protetto", renderesti un componente privato come questo.

Il componente Protected verificherà se isLoggedIn è vero o falso. Se è vero, andrà avanti e restituirà il componente privato. Se è falso, reindirizzerà l'utente a una pagina in cui può accedere.

Ulteriori informazioni sugli altri modi che puoi utilizzare per eseguire il rendering di un componente a seconda delle condizioni da questo articolo in poi rendering condizionale in React.

Nella tua applicazione, crea Protected.js.

import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
 se (!èAcceduto) {
 Restituzione ;
 }
 restituire i bambini;
};
esportazione predefinito Protetto;

In questo componente, l'istruzione if viene utilizzata per verificare se l'utente è autenticato. Se non lo sono, Navigare da reagire-router-dom li reindirizza alla home page. Tuttavia, se l'utente è autenticato, viene eseguito il rendering del componente figlio.

Utilizzo Protected.js in UNpp.js modificare il Profilo percorso della pagina.

 percorso="/profilo"
 elemento={



 }
/>

App.js dovrebbe assomigliare a questo.

import {Rotte, Rotte, BrowserRouter} da "react-router-dom";
importa {useState} da "reagire";
importa Navbar da "./Navbar";
import Protetto da "./Protected";
importa Casa da "./Casa";
importa Informazioni da "./Informazioni";
importa Profilo da "./Profilo";
funzione App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (vero);
 };
 const logOut = () => {
 setisLoggedIn (falso);
 };
 Restituzione (




 {è loggato? (
Disconnettersi
 ): (
Login
 )}

} />
 elemento={



 }
 />
} />





 );
}
esporta l'app predefinita;

Questo è tutto sulla creazione di percorsi protetti. Ora puoi accedere alla pagina del profilo solo se sei loggato. Se provi a navigare alla pagina del profilo senza effettuare il login verrai reindirizzato alla home page.

Controllo degli accessi basato sul ruolo

Questo tutorial ti ha mostrato come impedire agli utenti non autenticati di accedere a una pagina in un'applicazione React. In alcuni casi, potrebbe essere necessario andare ancora oltre e limitare gli utenti in base ai loro ruoli. Ad esempio, puoi fare in modo che una pagina dica una pagina di analisi che concede l'accesso solo agli amministratori. Qui dovrai aggiungere la logica nel componente Protected che verifica se un utente soddisfa le condizioni richieste.

Come implementare il rendering condizionale in React.js (con esempi)

Il rendering condizionale è un modo utile per migliorare la tua app. Ecco una selezione di modi per usarlo.

Leggi Avanti

Circa l'autore