Obično se kod izrade web aplikacija stranice za prijavu koriste za zaštitu privatnih stranica. Na primjer, za platformu za bloganje, nadzorna ploča može biti dostupna samo autentificiranim korisnicima. Ako neautentificirani korisnik pokuša pristupiti toj stranici, aplikacija ga preusmjerava na stranicu za prijavu. Nakon što se prijave, dobivaju pristup.
U ovom ćemo članku pogledati kako možete preusmjeriti korisnika s ograničene stranice na stranicu za prijavu. Također ćemo razgovarati o tome kako možete vratiti korisnika natrag na stranicu na kojoj je bio nakon prijave.
U React Routeru v6 postoje dva načina pomoću kojih možete preusmjeriti korisnika — komponenta Navigacija i useNavigate() kuka.
Napravite React aplikaciju
Napravite jednostavnu React aplikaciju pomoću kreiraj-reagiraj-aplikaciju naredba. Pomoću ove aplikacije testirat ćete kako Navigacijska komponenta i useNavigate() rad s kukom.
npx stvoriti-react-aplikacija reagiranje-preusmjeravanje
Napravite stranicu za prijavu
Morat ćete izraditi stranicu za prijavu za autentifikaciju korisnika. Budući da ovo nije vodič za provjeru autentičnosti, koristite niz objekata kao korisničku bazu podataka.
Stvorite novu datoteku u src mapu i nazovite je Login.js. Zatim dodajte sljedeći kod u kreirajte obrazac za prijavu.
uvoz {useState} iz "reagirati";
uvoz Nadzorna ploča iz "./Upravljačka ploča";
konst Prijava = () => {
const [korisničko ime, setusername] = useState("");
const [lozinka, postavi lozinku] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| lažno));
const korisnici = [{ korisničko ime: "Jane", zaporka: "testna lozinka" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst account = users.find((user) => user.username username);
ako (račun && account.password lozinka) {
setautentificiran(pravi)
localStorage.setItem("ovjeren", istina);
}
};
povratak (
<div>
<str>Dobrodošao natrag</str>
<obrazac onSubmit={handleSubmit}>
<ulazni
vrsta="tekst"
ime="Korisničko ime"
vrijednost={korisničko ime}
onChange={(e) => imekorisnika (e.target.value)}
/>
<ulazni
vrsta="zaporka"
ime="Zaporka"
onChange={(e) => postavi lozinku (e.target.value)}
/>
<vrsta unosa="podnijeti" vrijednost="podnijeti" />
</form>
</div>
)
};
}
izvozzadano Prijaviti se;
Ovo je jednostavan obrazac za prijavu. Kada korisnik pošalje svoje korisničko ime i lozinku, oni se uspoređuju s nizom. Ako su ti detalji točni, stanje provjere autentičnosti postavljeno je na pravi. Budući da ćete provjeravati je li korisnik autentificiran u komponenti nadzorne ploče, također morate pohraniti status autentifikacije negdje kojem mogu pristupiti druge komponente. Ovaj članak koristi lokalnu pohranu. U stvarnoj primjeni, koristeći Reagirajte kontekst bio bi bolji izbor.
Izradite stranicu nadzorne ploče
Dodajte sljedeći kod u novu datoteku pod nazivom Nadzorna ploča.js.
konst Nadzorna ploča = () => {
povratak (
<div>
<str>Dobro došli na svoju nadzornu ploču</str>
</div>
);
};
izvozzadano Nadzorna ploča;
Nadzorna ploča trebala bi biti dostupna samo autentificiranim korisnicima. Stoga, kada korisnici posjete stranicu nadzorne ploče, prvo provjerite jesu li autentificirani. Ako nisu, preusmjerite ih na stranicu za prijavu.
Da biste to učinili, prvo postavite rute aplikacije pomoću React usmjerivača.
npm instalirati reagirati-usmjerivač-dom
U index.js postavite usmjeravanje za svoju aplikaciju.
uvoz Reagirati iz "reagirati";
uvoz ReactDOM iz "react-dom/client";
uvoz aplikacija iz "./Aplikacija";
uvoz {BrowserRouter, Route, Routes} iz "react-router-dom";
uvoz Prijaviti se iz "./Prijaviti se";
uvoz Nadzorna ploča iz "./Upravljačka ploča";
konst korijen = ReactDOM.createRoot(dokument.getElementById("korijen"));
korijen.renderirati(
<Reagirati. StrictMode>
<BrowserRouter>
<Rute>
<Element indeksa rute={<Aplikacija />} />
<Staza rute="prijaviti se" element={<Prijaviti se />} />
<Staza rute="nadzorna ploča" element={<Nadzorna ploča />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Zaštitite stranicu nadzorne ploče
Sada kada su vaše rute aplikacije postavljene, sljedeći korak je rutu nadzorne ploče učiniti privatnom. Kada se komponenta nadzorne ploče učita, stanje provjere autentičnosti se dohvaća iz lokalne pohrane i pohranjuje u stanju. Ako korisnik nije autentificiran, aplikacija će ga preusmjeriti na stranicu za prijavu, inače će prikazati stranicu nadzorne ploče.
uvoz {useEffect, useState} iz "reagirati";
konst Nadzorna ploča = () => {
konst [autentificirano, postavljeno autentično] = useState(ništavan);
useEffect(() => {
const loggedInUser = localStorage.getItem("ovjeren");
if (loggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
if (!authenticated) {
// Preusmjeri
} drugo {
povratak (
<div>
<str>Dobro došli na svoju nadzornu ploču</str>
</div>
);
}
};
izvozzadano Nadzorna ploča;
Preusmjerite korisnika na stranicu za prijavu koristeći Navigaciju
Komponenta Navigate zamijenila je komponentu Redirect koja se koristila u React Router v5. Uvezi Navigaciju iz react-router-dom.
uvoz { Navigacija } iz "react-router-dom";
Za preusmjeravanje neautoriziranih korisnika upotrijebite to na sljedeći način.
if (!authenticated) {
povratak <Idite na zamjenu na="/login" />;
} drugo {
povratak (
<div>
<str>Dobro došli na svoju nadzornu ploču</str>
</div>
);
}
Navigacijska komponenta je deklarativni API. Oslanja se na korisnički događaj, što je u ovom slučaju provjera autentičnosti koja uzrokuje promjenu stanja i posljedično uzrokuje ponovno renderiranje komponente. Imajte na umu da ne morate koristiti ključnu riječ replace. Njegovom upotrebom zamjenjuje se trenutni URL umjesto da se gura u povijest preglednika.
Preusmjeri korisnika na drugu stranicu koristeći useNavigate()
Druga opcija za izvođenje preusmjeravanja u Reactu je useNavigate() kuka. Ova kuka omogućuje pristup API-ju imperativa navigacije. Započnite uvozom iz react-router-dom.
uvoz {useNavigate} iz "react-router-dom";
Preusmjeri kada se korisnik uspješno autentificira u handleSubmit() funkcionirati ovako:
konst navigacija = useNavigate();
konst Prijava = () => {
konst navigacija = useNavigate();
const [korisničko ime, setusername] = useState("");
const [lozinka, postavi lozinku] = useState("");
konst [autentificirano, postavljeno autentično] = useState(
localStorage.getItem (localStorage.getItem("ovjeren") || lažno)
);
const korisnici = [{ korisničko ime: "Jane", zaporka: "testna lozinka" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst account = users.find((user) => user.username username);
ako (račun && account.password lozinka) {
localStorage.setItem("ovjeren", istina);
kretati se ("/dashboard");
}
};
povratak (
<div>
<obrazac onSubmit={handleSubmit}>
<ulazni
vrsta="tekst"
ime="Korisničko ime"
vrijednost={korisničko ime}
onChange={(e) => imekorisnika (e.target.value)}
/>
<ulazni
vrsta="zaporka"
ime="Zaporka"
onChange={(e) => postavi lozinku (e.target.value)}
/>
<vrsta unosa="podnijeti" vrijednost="podnijeti" />
</form>
</div>
);
};
U ovom primjeru, nakon što korisnik pošalje obrazac s točnim podacima, preusmjerava se na nadzornu ploču.
Prilikom izrade aplikacija, jedan od ciljeva je pružiti korisnicima najbolje iskustvo. To možete učiniti tako da korisnika vratite na stranicu na kojoj je prije bio tako da ga preusmjerite na stranicu za prijavu. To možete učiniti prolaskom -1 za ovako navigaciju, navigacija (-1). Djeluje na isti način kao i pritiskanje gumba za povratak u vašem pregledniku.
Usmjeravanje u Reactu
U ovom ste članku naučili kako možete preusmjeriti korisnika na drugu stranicu u Reactu koristeći komponentu Navigacija i useNavigate() kuka. U članku je korišten obrazac za prijavu kako bi se pokazalo kako možete preusmjeriti neautorizirane korisnike sa zaštićene stranice na stranicu za prijavu.
