Običajno se pri izdelavi spletnih aplikacij prijavne strani uporabljajo za zaščito zasebnih strani. Na primer, za platformo za bloganje je lahko nadzorna plošča dostopna samo overjenim uporabnikom. Če nepreverjeni uporabnik poskuša dostopati do te strani, ga aplikacija preusmeri na stran za prijavo. Ko so prijavljeni, dobijo dostop.
V tem članku si bomo ogledali, kako lahko preusmerite uporabnika z omejene strani na stran za prijavo. Razpravljali bomo tudi o tem, kako lahko uporabnika vrnete nazaj na stran, na kateri je bil po prijavi.
V React Router v6 lahko uporabnika preusmerite na dva načina – komponento Navigate in useNavigate() kavelj.
Ustvarite aplikacijo React
Ustvarite preprosto aplikacijo React z uporabo create-react-aplikacija ukaz. S to aplikacijo boste preizkusili, kako delujeta komponenta Navigate in useNavigate() delo s kavljem.
npx ustvariti-react-app react-redirect
Ustvari stran za prijavo
Za preverjanje pristnosti uporabnikov boste morali ustvariti prijavno stran. Ker to ni vadnica za preverjanje pristnosti, uporabite niz predmetov kot bazo podatkov uporabnikov.
Ustvarite novo datoteko v src mapo in jo poimenujte Login.js. Nato dodajte naslednjo kodo v ustvarite obrazec za prijavo.
uvoz {useState} od "reagirati";
uvoz Nadzorna plošča od "./Nadzorna plošča";
konst Prijava = () => {
const [uporabniško ime, setusername] = useState("");
const [geslo, nastavi geslo] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| lažno));
const uporabniki = [{ uporabniško ime: "Jane", geslo: "preizkusno geslo" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst account = users.find((user) => user.username uporabniško ime);
če (račun && account.password geslo) {
setaavtenticirano(prav)
localStorage.setItem("overjen", prav);
}
};
vrnitev (
<div>
<str>Dobrodošel nazaj</str>
<obrazec onSubmit={handleSubmit}>
<vnos
vrsta="besedilo"
ime="Uporabniško ime"
vrednost={uporabniško ime}
onChange={(e) => setusername (e.target.value)}
/>
<vnos
vrsta="geslo"
ime="Geslo"
onChange={(e) => setpassword (e.target.value)}
/>
<vrsta vnosa="predložiti" vrednost="Predloži" />
</form>
</div>
)
};
}
izvozprivzeto Vpiši se;
To je preprost obrazec za prijavo. Ko uporabnik odda svoje uporabniško ime in geslo, se preveri glede na polje. Če so te podrobnosti pravilne, je stanje overjene nastavljeno na prav. Ker boste preverjali, ali je uporabnik overjen v komponenti nadzorne plošče, morate tudi shraniti status preverjanja pristnosti nekam, do katerega lahko dostopajo druge komponente. Ta članek uporablja lokalno shrambo. V resnični aplikaciji z uporabo Reagirajte na kontekst bi bila boljša izbira.
Ustvarite stran nadzorne plošče
Dodajte naslednjo kodo v novo datoteko, imenovano Dashboard.js.
konst Nadzorna plošča = () => {
vrnitev (
<div>
<str>Dobrodošli na vaši nadzorni plošči</str>
</div>
);
};
izvozprivzeto armaturna plošča;
Nadzorna plošča mora biti dostopna samo overjenim uporabnikom. Zato, ko uporabniki obiščejo stran nadzorne plošče, najprej preverijo, ali so overjeni. Če niso, jih preusmerite na stran za prijavo.
Če želite to narediti, najprej nastavite poti aplikacije z usmerjevalnikom React.
npm namestite reagirati-usmerjevalnik-dom
V index.js nastavite usmerjanje za svojo aplikacijo.
uvoz Reagiraj od "reagirati";
uvoz ReactDOM od "react-dom/client";
uvoz aplikacija od "./Aplikacija";
uvoz {BrowserRouter, Route, Routes} od "react-router-dom";
uvoz Vpiši se od "./Vpiši se";
uvoz Nadzorna plošča od "./Nadzorna plošča";
konst root = ReactDOM.createRoot(dokument.getElementById("root"));
korenina.render(
<Reagiraj. StrictMode>
<BrowserRouter>
<Poti>
<Element indeksa poti={<Aplikacija />} />
<Pot poti="Vpiši se" element={<Vpiši se />} />
<Pot poti="armaturna plošča" element={<Nadzorna plošča />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Zaščitite stran nadzorne plošče
Zdaj, ko so vaše aplikacijske poti nastavljene, je naslednji korak naredi pot nadzorne plošče zasebno. Ko se komponenta nadzorne plošče naloži, se stanje preverjanja pristnosti pridobi iz lokalnega pomnilnika in shrani v stanje. Če uporabnik ni overjen, bo aplikacija preusmerila na stran za prijavo, sicer bo prikazala stran nadzorne plošče.
uvoz {useEffect, useState} od "reagirati";
konst Nadzorna plošča = () => {
konst [preverjeno, nastavljeno pristnost] = useState(nič);
useEffect(() => {
const loggedInUser = localStorage.getItem("overjen");
if (loggedInUser) {
setaavtentificiran (prijavljen uporabnik);
}
}, []);
if (!authenticated) {
// Preusmeri
} drugače {
vrnitev (
<div>
<str>Dobrodošli na vaši nadzorni plošči</str>
</div>
);
}
};
izvozprivzeto armaturna plošča;
Preusmeri uporabnika na stran za prijavo z Navigacijo
Komponenta Navigate je nadomestila komponento Redirect, ki je bila uporabljena v React Router v5. Uvozi Navigate iz react-router-dom.
uvoz { Krmarjenje } od "react-router-dom";
Če želite preusmeriti nepreverjene uporabnike, uporabite to na naslednji način.
if (!authenticated) {
vrnitev <Pomaknite se zamenjaj na="/login" />;
} drugače {
vrnitev (
<div>
<str>Dobrodošli na vaši nadzorni plošči</str>
</div>
);
}
Komponenta Navigate je deklarativni API. Zanaša se na uporabniški dogodek, ki je v tem primeru avtentikacija, ki povzroči spremembo stanja in posledično povzroči ponovno upodobitev komponente. Upoštevajte, da vam ni treba uporabiti zamenjave ključne besede. Z njegovo uporabo zamenjate trenutni URL, namesto da bi ga potisnili v zgodovino brskalnika.
Preusmeri uporabnika na drugo stran z uporabo useNavigate()
Druga možnost za izvajanje preusmeritev v Reactu je useNavigate() kavelj. Ta kavelj omogoča dostop do API-ja za navigacijo. Začnite z uvozom iz react-router-dom.
uvoz {useNavigate} od "react-router-dom";
Preusmeri, ko je uporabnik uspešno overjen v handleSubmit() deluje takole:
konst navigate = useNavigate();
konst Prijava = () => {
konst navigate = useNavigate();
const [uporabniško ime, setusername] = useState("");
const [geslo, nastavi geslo] = useState("");
konst [preverjeno, nastavljeno pristnost] = useState(
localStorage.getItem (localStorage.getItem("overjen") || napačno)
);
const uporabniki = [{ uporabniško ime: "Jane", geslo: "preizkusno geslo" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst account = users.find((user) => user.username uporabniško ime);
če (račun && account.password geslo) {
localStorage.setItem("overjen", prav);
krmariti("/dashboard");
}
};
vrnitev (
<div>
<obrazec onSubmit={handleSubmit}>
<vnos
vrsta="besedilo"
ime="Uporabniško ime"
vrednost={uporabniško ime}
onChange={(e) => setusername (e.target.value)}
/>
<vnos
vrsta="geslo"
ime="Geslo"
onChange={(e) => setpassword (e.target.value)}
/>
<vrsta vnosa="predložiti" vrednost="Predloži" />
</form>
</div>
);
};
V tem primeru, ko uporabnik odda obrazec s pravilnimi podatki, je preusmerjen na nadzorno ploščo.
Pri izdelavi aplikacij je eden od ciljev uporabnikom omogočiti najboljšo izkušnjo. To lahko storite tako, da uporabnika vrnete na stran, na kateri je bil prej, tako da ga preusmerite na stran za prijavo. To lahko storite tako, da podate -1 za tako krmarjenje, navigacija (-1). Deluje na enak način kot pritisk gumba za nazaj v brskalniku.
Usmerjanje v Reactu
V tem članku ste izvedeli, kako lahko preusmerite uporabnika na drugo stran v Reactu z uporabo komponente Navigate in useNavigate() kavelj. Članek je uporabil obrazec za prijavo, da bi prikazal, kako lahko nepreverjene uporabnike preusmerite z zaščitene strani na stran za prijavo.
