Di solito, durante la creazione di applicazioni Web, le pagine di accesso vengono utilizzate per proteggere le pagine private. Ad esempio, per una piattaforma di blogging, la dashboard potrebbe essere accessibile solo agli utenti autenticati. Se un utente non autenticato tenta di accedere a quella pagina, l'applicazione lo reindirizza alla pagina di accesso. Una volta effettuato l'accesso, ottengono l'accesso.
In questo articolo, vedremo come puoi reindirizzare un utente da una pagina con restrizioni a una pagina di accesso. Discuteremo anche di come riportare l'utente alla pagina in cui si trovava dopo l'accesso.
In React Router v6, ci sono due modi che puoi utilizzare per reindirizzare un utente: il componente Navigate e il useNavigate() gancio.
Crea un'applicazione di reazione
Crea una semplice applicazione React usando il creare-reagire-app comando. Utilizzerai questa applicazione per testare come il componente Navigate e il useNavigate() lavoro a gancio.
npx creare-react-app reagire-reindirizzamento
Crea una pagina di accesso
Sarà necessario creare una pagina di accesso per autenticare gli utenti. Poiché questo non è un tutorial di autenticazione, utilizzare un array di oggetti come database utente.
Crea un nuovo file in src cartella e nominarla Login.js. Quindi aggiungi il codice seguente, a creare il modulo di accesso.
importare {UsaStato} da "reagire";
importare Pannello di controllo da "./Pannello di controllo";
cost Accesso = () => {
const [nomeutente, setnomeutente] = useState("");
const [password, setpassword] = useState("");
cost [autenticato, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("autenticato")|| falso));
const utenti = [{ nome utente: "Giovanna", parola d'ordine: "password di prova" }];
cost handleSubmit = (e) => {
e.preventDefault()
cost account = users.find((user) => user.username username);
se (conto && account.password password) {
setautenticato(VERO)
localStorage.setItem("autenticato", VERO);
}
};
Restituzione (
<div>
<p>Bentornato</p>
<form onSubmit={handleSubmit}>
<ingresso
tipo="testo"
nome="Nome utente"
valore={nome utente}
onChange={(e) => setusername (e.target.value)}
/>
<ingresso
tipo="parola d'ordine"
nome="Parola d'ordine"
onChange={(e) => setpassword (e.target.value)}
/>
<tipo di input="Sottoscrivi" valore="Invia" />
</form>
</div>
)
};
}
esportarepredefinito Login;
Questo è un semplice modulo di accesso. Quando un utente invia il proprio nome utente e password, vengono confrontati con l'array. Se questi dettagli sono corretti, lo stato autenticato è impostato su VERO. Poiché controllerai se l'utente è autenticato nel componente Dashboard, devi anche archiviare lo stato di autenticazione in un punto accessibile da altri componenti. Questo articolo usa l'archiviazione locale. In un'applicazione reale, utilizzando Contesto di reazione sarebbe una scelta migliore.
Crea una pagina dashboard
Aggiungi il codice seguente in un nuovo file chiamato Dashboard.js.
cost Dashboard = () => {
Restituzione (
<div>
<p>Benvenuto nella tua dashboard</p>
</div>
);
};
esportarepredefinito Pannello di controllo;
La dashboard dovrebbe essere accessibile solo agli utenti autenticati. Pertanto, quando gli utenti visitano la pagina del dashboard, verifica prima di tutto se sono autenticati. In caso contrario, reindirizzali alla pagina di accesso.
Per fare ciò, imposta prima i percorsi dell'applicazione utilizzando il router React.
npm installare reagire-router-dom
In index.js, imposta il routing per la tua applicazione.
importare Reagire da "reagire";
importare ReagireDOM da "react-dom/client";
importare App da "./App";
importare { BrowserRouter, Rotta, Rotte } da "reagire-router-dom";
importare Login da "./Login";
importare Pannello di controllo da "./Pannello di controllo";
cost root = ReactDOM.createRoot(documento.getElementById("radice"));
radice.rendere(
<Reagire. Modalità rigorosa>
<BrowserRouter>
<Itinerari>
<Elemento indice di instradamento={<App />} />
<Percorso percorso="Accedere" elemento={<Login />} />
<Percorso percorso="Pannello" elemento={<Pannello di controllo />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Proteggi la pagina del dashboard
Ora che i percorsi delle applicazioni sono stati impostati, il passaggio successivo è rendere privato il percorso della dashboard. Quando il componente Dashboard viene caricato, lo stato di autenticazione viene recuperato dalla memoria locale e archiviato nello stato. Se l'utente non è autenticato, l'applicazione reindirizzerà alla pagina di login altrimenti visualizzerà la pagina dashboard.
importare { useEffect, useState } da "reagire";
cost Dashboard = () => {
cost [autenticato, setauthenticated] = useState(nullo);
useEffect(() => {
const loggatoInUser = localStorage.getItem("autenticato");
se (utente loggato) {
setauthenticated (loggedInUser);
}
}, []);
se (! autenticato) {
// Reindirizzare
} altro {
Restituzione (
<div>
<p>Benvenuto nella tua dashboard</p>
</div>
);
}
};
esportarepredefinito Pannello di controllo;
Reindirizza l'utente alla pagina di accesso utilizzando Naviga
Il componente Navigate ha sostituito il componente Redirect utilizzato in React Router v5. Importa Naviga da react-router-dom.
importare { Navigare } da "reagire-router-dom";
Per reindirizzare utenti non autenticati, utilizzalo come segue.
se (! autenticato) {
Restituzione <Passa a sostituire a="/login" />;
} altro {
Restituzione (
<div>
<p>Benvenuto nella tua dashboard</p>
</div>
);
}
Il componente Navigate è un'API dichiarativa. Si basa su un evento utente, che in questo caso è l'autenticazione per causare un cambiamento di stato e di conseguenza causare un nuovo rendering del componente. Tieni presente che non è necessario utilizzare la parola chiave sostituisci. Il suo utilizzo sostituisce l'URL corrente invece di inviarlo alla cronologia del browser.
Reindirizza l'utente a un'altra pagina utilizzando useNavigate()
L'altra opzione per eseguire i reindirizzamenti in React è il useNavigate() gancio. Questo hook fornisce l'accesso all'API imperativa di navigazione. Inizia importandolo da react-router-dom.
importare { usa Naviga } da "reagire-router-dom";
Reindirizzamento una volta che l'utente è stato autenticato correttamente in handleSubmit() funzionare in questo modo:
cost naviga = usaNaviga();
cost Accesso = () => {
cost naviga = usaNaviga();
const [nomeutente, setnomeutente] = useState("");
const [password, setpassword] = useState("");
cost [autenticato, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("autenticato") || falso)
);
const utenti = [{ nome utente: "Giovanna", parola d'ordine: "password di prova" }];
cost handleSubmit = (e) => {
e.preventDefault();
cost account = users.find((user) => user.username username);
se (conto && account.password password) {
localStorage.setItem("autenticato", VERO);
navigare("/dashboard");
}
};
Restituzione (
<div>
<form onSubmit={handleSubmit}>
<ingresso
tipo="testo"
nome="Nome utente"
valore={nome utente}
onChange={(e) => setusername (e.target.value)}
/>
<ingresso
tipo="parola d'ordine"
nome="Parola d'ordine"
onChange={(e) => setpassword (e.target.value)}
/>
<tipo di input="Sottoscrivi" valore="Invia" />
</form>
</div>
);
};
In questo esempio, una volta che l'utente invia il modulo con i dettagli corretti, viene reindirizzato alla dashboard.
Quando si creano applicazioni, uno degli obiettivi è offrire agli utenti la migliore esperienza. Puoi farlo riportando l'utente alla pagina in cui era prima reindirizzandolo alla pagina di accesso. Puoi farlo passando -1 per navigare in questo modo, naviga(-1). Funziona allo stesso modo di premere il pulsante Indietro sul tuo browser.
Instradamento in reazione
In questo articolo, hai appreso come reindirizzare un utente a un'altra pagina in React utilizzando sia il componente Naviga che il useNavigate() gancio. L'articolo utilizzava un modulo di accesso per dimostrare come reindirizzare gli utenti non autenticati da una pagina protetta alla pagina di accesso.
