De obicei, la construirea aplicațiilor web, paginile de conectare sunt folosite pentru a proteja paginile private. De exemplu, pentru o platformă de blogging, tabloul de bord poate fi accesibil numai utilizatorilor autentificați. Dacă un utilizator neautentificat încearcă să acceseze pagina respectivă, aplicația îl redirecționează către pagina de conectare. Odată ce sunt autentificați, au acces.
În acest articol, vom analiza cum puteți redirecționa un utilizator de la o pagină restricționată la o pagină de conectare. Vom discuta, de asemenea, cum puteți întoarce utilizatorul înapoi la pagina pe care se afla după conectare.
În React Router v6, există două moduri pe care le puteți utiliza pentru a redirecționa un utilizator - componenta Navigate și useNavigate() cârlig.
Creați o aplicație React
Creați o aplicație React simplă folosind create-react-app comanda. Veți folosi această aplicație pentru a testa modul în care componenta Navigate și useNavigate() lucru cu cârlig.
npx crea-react-app react-redirect
Creați o pagină de conectare
Va trebui să creați o pagină de conectare pentru a autentifica utilizatorii. Deoarece acesta nu este un tutorial de autentificare, utilizați o serie de obiecte ca bază de date pentru utilizatori.
Creați un fișier nou în src folder și denumește-l Login.js. Apoi adăugați următorul cod, la creați formularul de conectare.
import { useState } din "reacţiona";
import Bord din "./Bord";
const Autentificare = () => {
const [nume utilizator, setusername] = useState("");
const [parolă, setare parolă] = useState("");
const [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem(„authenticated”))|| fals));
const users = [{ nume de utilizator: "Jane", parola: "parola de testare" }];
const handleSubmit = (e) => {
e.preventDefault()
const cont = users.find((user) => user.username nume utilizator);
dacă (cont && cont.parolă parola) {
autentificat(Adevărat)
localStorage.setItem("autentificat", Adevărat);
}
};
întoarcere (
<div>
<p>Bine ai revenit</p>
<form onSubmit={handleSubmit}>
<intrare
tip="text"
nume="Nume de utilizator"
valoare={nume utilizator}
onChange={(e) => setusername (e.target.value)}
/>
<intrare
tip="parola"
nume="Parola"
onChange={(e) => setpassword (e.target.value)}
/>
<tip de intrare="Trimite" valoare="Trimite" />
</form>
</div>
)
};
}
exportMod implicit Autentificare;
Acesta este un simplu formular de conectare. Când un utilizator își trimite numele de utilizator și parola, acestea sunt verificate în matrice. Dacă aceste detalii sunt corecte, starea autentificată este setată la Adevărat. Deoarece veți verifica dacă utilizatorul este autentificat în componenta Dashboard, trebuie, de asemenea, să stocați starea de autentificare într-un loc care poate fi accesat de alte componente. Acest articol folosește stocarea locală. Într-o aplicație reală, folosind Reacționează contextul ar fi o alegere mai buna.
Creați o pagină de tablou de bord
Adăugați următorul cod într-un fișier nou numit Dashboard.js.
const Tabloul de bord = () => {
întoarcere (
<div>
<p>Bun venit la tabloul de bord</p>
</div>
);
};
exportMod implicit Bord;
Tabloul de bord ar trebui să fie accesibil numai utilizatorilor autentificați. Prin urmare, atunci când utilizatorii vizitează pagina tabloului de bord, verificați mai întâi dacă sunt autentificați. Dacă nu sunt, redirecționați-i către pagina de autentificare.
Pentru a face acest lucru, configurați mai întâi rutele aplicației folosind routerul React.
npm instalare reacţionează-router-dom
În index.js, configurați rutarea pentru aplicația dvs.
import Reacţiona din "reacţiona";
import ReactDOM din „react-dom/client”;
import App din „./Aplicație”;
import { BrowserRouter, Route, Routes } din „react-router-dom”;
import Autentificare din "./Autentificare";
import Bord din "./Bord";
const root = ReactDOM.createRoot(document.getElementById(„rădăcină”);
rădăcină.face(
<Reacţiona. StrictMode>
<BrowserRouter>
<Trasee>
<Element index rută={<Aplicație />} />
<Calea traseului="Autentificare" element={<Autentificare />} />
<Calea traseului="bord" element={<Tabloul de bord />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Protejați pagina tabloului de bord
Acum că rutele dvs. de aplicație sunt configurate, următorul pas este să faceți traseul tabloului de bord privat. Când se încarcă componenta Dashboard, starea de autentificare este preluată din stocarea locală și stocată în stare. Dacă utilizatorul nu este autentificat, aplicația va redirecționa către pagina de autentificare, altfel va afișa pagina tabloului de bord.
import { useEffect, useState } din "reacţiona";
const Tabloul de bord = () => {
const [authenticated, setauthenticated] = useState(nul);
useEffect(() => {
const loggedInUser = localStorage.getItem("autentificat");
if (loggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
dacă (!autentificat) {
// Redirecționează
} altfel {
întoarcere (
<div>
<p>Bun venit la tabloul de bord</p>
</div>
);
}
};
exportMod implicit Bord;
Redirecționați utilizatorul către pagina de conectare utilizând Navigare
Componenta Navigate a înlocuit componenta Redirect care a fost folosită în React Router v5. Import Navigați din react-router-dom.
import { Navigați } din „react-router-dom”;
Pentru a redirecționa utilizatorii neautentificați, utilizați-l după cum urmează.
dacă (!autentificat) {
întoarcere <Navigați înlocuiți la="/login" />;
} altfel {
întoarcere (
<div>
<p>Bun venit la tabloul de bord</p>
</div>
);
}
Componenta Navigate este un API declarativ. Se bazează pe un eveniment utilizator, care în acest caz este autentificare, pentru a provoca o schimbare de stare și, în consecință, a provoca o re-rendare a componentei. Rețineți că nu trebuie să utilizați cuvântul cheie înlocuiți. Folosirea acesteia înlocuiește adresa URL curentă în loc să o împinge în istoricul browserului.
Redirecționați utilizatorul către o altă pagină utilizând useNavigate()
Cealaltă opțiune pentru a efectua redirecționări în React este useNavigate() cârlig. Acest cârlig oferă acces la API-ul imperativ de navigare. Începeți prin a-l importa din react-router-dom.
import { useNavigate } din „react-router-dom”;
Redirecționează odată ce utilizatorul este autentificat cu succes în handleSubmit() functioneaza astfel:
const navigate = folosesteNavigate();
const Autentificare = () => {
const navigate = folosesteNavigate();
const [nume utilizator, setusername] = useState("");
const [parolă, setare parolă] = useState("");
const [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("autentificat") || fals)
);
const users = [{ nume de utilizator: "Jane", parola: "parola de testare" }];
const handleSubmit = (e) => {
e.preventDefault();
const cont = users.find((user) => user.username nume utilizator);
dacă (cont && cont.parolă parola) {
localStorage.setItem("autentificat", Adevărat);
naviga("/dashboard");
}
};
întoarcere (
<div>
<form onSubmit={handleSubmit}>
<intrare
tip="text"
nume="Nume de utilizator"
valoare={nume utilizator}
onChange={(e) => setusername (e.target.value)}
/>
<intrare
tip="parola"
nume="Parola"
onChange={(e) => setpassword (e.target.value)}
/>
<tip de intrare="Trimite" valoare="Trimite" />
</form>
</div>
);
};
În acest exemplu, odată ce utilizatorul trimite formularul cu detaliile corecte, acesta este redirecționat către tabloul de bord.
La crearea aplicațiilor, unul dintre obiective este de a oferi utilizatorilor cea mai bună experiență. Puteți face acest lucru ducând utilizatorul înapoi la pagina în care era înainte, redirecționându-l către pagina de conectare. Puteți face acest lucru trecând -1 pentru a naviga astfel, naviga (-1). Acționează în același mod ca și apăsarea butonului înapoi de pe browser.
Rutare în React
În acest articol, ați învățat cum puteți redirecționa un utilizator către o altă pagină în React folosind atât componenta Navigate, cât și useNavigate() cârlig. Articolul a folosit un formular de conectare pentru a demonstra cum puteți redirecționa utilizatorii neautentificați dintr-o pagină protejată către pagina de conectare.
