Tavaliselt kasutatakse veebirakenduste loomisel privaatsete lehtede kaitsmiseks sisselogimislehti. Näiteks ajaveebiplatvormi puhul võib armatuurlaud olla juurdepääsetav ainult autentitud kasutajatele. Kui autentimata kasutaja proovib sellele lehele pääseda, suunab rakendus ta sisselogimislehele. Kui nad on sisse logitud, saavad nad juurdepääsu.
Selles artiklis vaatleme, kuidas saate kasutaja piiratud lehelt ümber suunata sisselogimislehele. Samuti arutame, kuidas saate kasutaja pärast sisselogimist tagasi lehele, kus ta oli, tagasi.
React Router v6-s on kasutaja ümbersuunamiseks kaks võimalust – navigeerimiskomponent ja useNavigate() konks.
Looge reageerimisrakendus
Looge lihtne Reacti rakendus, kasutades loo-reageeri rakendus käsk. Kasutate seda rakendust, et testida, kuidas navigeerimiskomponent ja useNavigate() konksu töö.
npx luua-react-app reageerida-ümbersuunamine
Looge sisselogimisleht
Kasutajate autentimiseks peate looma sisselogimislehe. Kuna see ei ole autentimisõpetus, kasutage kasutajate andmebaasina objektide massiivi.
Looge kaustas uus fail src kaust ja andke sellele nimi Login.js. Seejärel lisage järgmine kood loo sisselogimisvorm.
importida { useState } alates "reageerida";
importida Armatuurlaud alates "./Armatuurlaud";
konst Logi sisse = () => {
const [kasutajanimi, setusername] = useState("");
const [parool, määrake parool] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| vale));
const users = [{ kasutajanimi: "Jane", parool: "testparool" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst konto = kasutajad.leida((kasutaja) => kasutaja.kasutajanimi kasutajanimi);
kui (konto && account.password parool) {
seauthenticated (tõsi)
localStorage.setItem("autentitud", tõsi);
}
};
tagasi (
<div>
<lk>Tere tulemast tagasi</lk>
<vorm onSubmit={handleSubmit}>
<sisend
tüüp="tekst"
nimi ="Kasutajanimi"
väärtus={kasutajanimi}
onChange={(e) => setusername (e.target.value)}
/>
<sisend
tüüp="parool"
nimi ="Parool"
onChange={(e) => määra parool (e.target.value)}
/>
<sisendi tüüp="Esita" väärtus="Esita" />
</form>
</div>
)
};
}
eksportidavaikimisi Logi sisse;
See on lihtne sisselogimisvorm. Kui kasutaja esitab oma kasutajanime ja parooli, kontrollitakse neid massiivi suhtes. Kui need andmed on õiged, seatakse autentimise olek tõsi. Kuna kontrollite, kas kasutaja on armatuurlaua komponendis autentitud, peate ka autentimisoleku salvestama kuskile, kuhu pääsevad juurde ka teised komponendid. See artikkel kasutab kohalikku salvestusruumi. Reaalses rakenduses, kasutades Reageeri kontekstile oleks parem valik.
Looge juhtpaneeli leht
Lisage järgmine kood uude faili nimega Dashboard.js.
konst Armatuurlaud = () => {
tagasi (
<div>
<lk>Tere tulemast teie juhtpaneelile</lk>
</div>
);
};
eksportidavaikimisi Armatuurlaud;
Armatuurlaud peaks olema juurdepääsetav ainult autentitud kasutajatele. Seega, kui kasutajad armatuurlaua lehte külastavad, kontrollige esmalt, kas nad on autentitud. Kui neid ei ole, suunake nad sisselogimislehele.
Selleks seadistage esmalt rakenduse marsruudid Reacti ruuteri abil.
npm installida reageerida-ruuter-dom
Seadistage failis index.js oma rakenduse marsruutimine.
importida Reageerige alates "reageerida";
importida ReactDOM alates "react-dom/klient";
importida Rakendus alates "./Rakendus";
importida { BrowserRouter, Route, Routes } alates "react-ruuter-dom";
importida Logi sisse alates "./Logi sisse";
importida Armatuurlaud alates "./Armatuurlaud";
konst root = ReactDOM.createRoot(dokument.getElementById("juur"));
juur.renderdada(
<Reageerige. Range režiim>
<BrowserRouter>
<Marsruudid>
<Marsruudiindeksi element={<Rakendus />} />
<Marsruudi tee="Logi sisse" element={<Logi sisse />} />
<Marsruudi tee="armatuurlaud" element={<Armatuurlaud />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Kaitske armatuurlaua lehte
Nüüd, kui teie rakenduste marsruudid on seadistatud, on järgmine samm muuta armatuurlaua marsruut privaatseks. Armatuurlaua komponendi laadimisel hangitakse autentimise olek kohalikust mälust ja salvestatakse olekus. Kui kasutaja ei ole autentitud, suunab rakendus ümber sisselogimislehele, vastasel juhul kuvatakse armatuurlaua leht.
importida { useEffect, useState } alates "reageerida";
konst Armatuurlaud = () => {
konst [authenticated, setauthenticated] = useState(null);
useEffect(() => {
const loggedInUser = localStorage.getItem("autentitud");
if (loggedInUser) {
seauthenticated (loggedInUser);
}
}, []);
if (!authenticated) {
// Ümbersuunamine
} muidu {
tagasi (
<div>
<lk>Tere tulemast teie juhtpaneelile</lk>
</div>
);
}
};
eksportidavaikimisi Armatuurlaud;
Suunake kasutaja Navigeeri abil sisselogimislehele
Navigeerimise komponent asendas React Router v5-s kasutatud ümbersuunamise komponendi. Import Navigeerige saidilt react-router-dom.
importida { Navigeeri } alates "react-ruuter-dom";
Autentimata kasutajate ümbersuunamiseks kasutage seda järgmiselt.
if (!authenticated) {
tagasi <Navigeeri asenda ="/login" />;
} muidu {
tagasi (
<div>
<lk>Tere tulemast teie juhtpaneelile</lk>
</div>
);
}
Navigeeri komponent on deklaratiivne API. See tugineb kasutaja sündmusele, mis antud juhul on autentimine, mis põhjustab oleku muutuse ja sellest tulenevalt komponendi uuesti renderdamist. Pange tähele, et te ei pea kasutama asendusmärksõna. Selle kasutamine asendab praeguse URL-i, selle asemel et lükata see brauseri ajalukku.
Suuna kasutaja ümber teisele lehele, kasutades useNavigate()
Teine võimalus Reactis ümbersuunamiste tegemiseks on useNavigate() konks. See konks annab juurdepääsu navigeerimise hädavajalikule API-le. Alustage selle importimisest saidist react-router-dom.
importida { useNavigate } alates "react-ruuter-dom";
Suuna ümber, kui kasutaja on rakenduses edukalt autentitud HandSubmit() toimib nii:
konst navigate = useNavigate();
konst Logi sisse = () => {
konst navigate = useNavigate();
const [kasutajanimi, setusername] = useState("");
const [parool, määrake parool] = useState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("autentitud") || vale)
);
const users = [{ kasutajanimi: "Jane", parool: "testparool" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst konto = kasutajad.leida((kasutaja) => kasutaja.kasutajanimi kasutajanimi);
kui (konto && account.password parool) {
localStorage.setItem("autentitud", tõsi);
navigate("/dashboard");
}
};
tagasi (
<div>
<vorm onSubmit={handleSubmit}>
<sisend
tüüp="tekst"
nimi ="Kasutajanimi"
väärtus={kasutajanimi}
onChange={(e) => setusername (e.target.value)}
/>
<sisend
tüüp="parool"
nimi ="Parool"
onChange={(e) => määra parool (e.target.value)}
/>
<sisendi tüüp="Esita" väärtus="Esita" />
</form>
</div>
);
};
Selles näites, kui kasutaja esitab vormi õigete üksikasjadega, suunatakse ta armatuurlauale.
Rakenduste loomisel on üks eesmärke pakkuda kasutajatele parimat kogemust. Seda saate teha, viies kasutaja tagasi lehele, kus ta oli varem, suunates ta sisselogimislehele. Saate seda teha nii navigeerimiseks, kui möödute -1, navigeeri (-1). See toimib samamoodi nagu brauseri tagasinupu vajutamine.
Marsruutimine Reactis
Sellest artiklist õppisite, kuidas saate kasutaja Reactis teisele lehele suunata, kasutades nii navigeerimiskomponenti kui ka useNavigate() konks. Artiklis kasutati sisselogimisvormi, et näidata, kuidas saate autentimata kasutajaid kaitstud lehelt ümber suunata sisselogimislehele.
