Paprastai kuriant žiniatinklio programas prisijungimo puslapiai naudojami privačių puslapių apsaugai. Pavyzdžiui, tinklaraščių platformoje prietaisų skydelis gali būti pasiekiamas tik patvirtintiems vartotojams. Jei neautentifikuotas vartotojas bando pasiekti tą puslapį, programa nukreipia jį į prisijungimo puslapį. Kai jie yra prisijungę, jie gauna prieigą.
Šiame straipsnyje apžvelgsime, kaip galite nukreipti vartotoją iš apriboto puslapio į prisijungimo puslapį. Taip pat aptarsime, kaip grąžinti vartotoją į puslapį, kuriame jis buvo prisijungęs.
„React Router v6“ yra du būdai, kuriais galite peradresuoti vartotoją – komponentas „Navigate“ ir useNavigate() kabliukas.
Sukurkite „React“ programą
Sukurkite paprastą React programą naudodami kurti-reaguoti-programėlę komandą. Naudosite šią programą norėdami išbandyti, kaip Navigate komponentas ir useNavigate() kablio darbas.
npx sukurti-react-app reaguoti-peradresuoti
Sukurkite prisijungimo puslapį
Norėdami autentifikuoti vartotojus, turėsite sukurti prisijungimo puslapį. Kadangi tai nėra autentifikavimo pamoka, naudokite objektų masyvą kaip vartotojo duomenų bazę.
Sukurkite naują failą src aplanką ir pavadinkite jį Login.js. Tada pridėkite šį kodą į sukurti prisijungimo formą.
importuoti { useState } iš „reaguoti“;
importuoti Prietaisų skydelis iš "./prietaisų skydelis";
konst Prisijungti = () => {
const [naudotojo vardas, setusername] = useState("");
const [slaptažodis, nustatyti slaptažodį] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("autentifikuota")|| klaidinga));
const vartotojai = [{ vartotojo vardas: "Džeinė", Slaptažodis: "bandomasis slaptažodis" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst account = vartotojai.rasti((vartotojas) => vartotojas.naudotojo vardas vartotojo vardas);
jei (sąskaita && account.password slaptažodis) {
nustatytas (tiesa)
localStorage.setItem("patvirtintas", tiesa);
}
};
grąžinti (
<div>
<p>Sveikas sugrįžęs</p>
<forma onSubmit={handleSubmit}>
<įvestis
tipas ="tekstą"
vardas ="Vartotojo vardas"
value={naudotojo vardas}
onChange={(e) => setusername (e.target.value)}
/>
<įvestis
tipas ="Slaptažodis"
vardas ="Slaptažodis"
onChange={(e) => nustatyti slaptažodį (e.target.value)}
/>
<įvesties tipas ="Pateikti" vertė ="Pateikti" />
</form>
</div>
)
};
}
eksportuotinumatytas Prisijungti;
Tai paprasta prisijungimo forma. Kai vartotojas pateikia savo vartotojo vardą ir slaptažodį, jie tikrinami pagal masyvą. Jei ši informacija teisinga, nustatoma autentifikavimo būsena tiesa. Kadangi tikrinsite, ar vartotojas autentifikuotas prietaisų skydelio komponente, autentifikavimo būseną taip pat turite išsaugoti kažkur, kur galėtų pasiekti kiti komponentai. Šiame straipsnyje naudojama vietinė saugykla. Tikroje programoje, naudojant Reaguokite į kontekstą būtų geresnis pasirinkimas.
Sukurkite informacijos suvestinės puslapį
Įtraukite šį kodą į naują failą pavadinimu Dashboard.js.
konst Prietaisų skydelis = () => {
grąžinti (
<div>
<p>Sveiki atvykę į jūsų prietaisų skydelį</p>
</div>
);
};
eksportuotinumatytas Prietaisų skydelis;
Prietaisų skydelis turėtų būti pasiekiamas tik patvirtintiems vartotojams. Todėl, kai vartotojai apsilanko prietaisų skydelio puslapyje, pirmiausia patikrinkite, ar jie autentifikuoti. Jei jų nėra, nukreipkite juos į prisijungimo puslapį.
Norėdami tai padaryti, pirmiausia nustatykite programos maršrutus naudodami „React“ maršrutizatorių.
npm diegti react-router-dom
Index.js nustatykite programos maršrutą.
importuoti Reaguoti iš „reaguoti“;
importuoti ReactDOM iš "react-dom/klientas";
importuoti Programėlė iš "./App";
importuoti { Naršyklės maršrutizatorius, maršrutas, maršrutai } iš „react-router-dom“;
importuoti Prisijungti iš "./Prisijungti";
importuoti Prietaisų skydelis iš "./prietaisų skydelis";
konst root = ReactDOM.createRoot(dokumentas.getElementById("root"));
šaknis.perteikti(
<Reaguoti. Griežtas režimas>
<BrowserRouter>
<Maršrutai>
<Maršruto indekso elementas={<Programėlė />} />
<Maršruto kelias="Prisijungti" element={<Prisijungti />} />
<Maršruto kelias="prietaisų skydelis" element={<Prietaisų skydelis />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Apsaugokite prietaisų skydelio puslapį
Dabar, kai jūsų taikymo maršrutai yra nustatyti, kitas žingsnis yra padaryti prietaisų skydelio maršrutą privatų. Kai įkeliamas informacijos suvestinės komponentas, autentifikavimo būsena nuskaitoma iš vietinės saugyklos ir išsaugoma būsenoje. Jei vartotojas nėra autentifikuotas, programa nukreips į prisijungimo puslapį, kitaip bus rodomas prietaisų skydelio puslapis.
importuoti { useEffect, useState } iš „reaguoti“;
konst Prietaisų skydelis = () => {
konst [authenticated, setauthenticated] = useState(nulinis);
useEffect(() => {
const loggedInUser = localStorage.getItem("patvirtintas");
if (loggedInUser) {
nustatytas autentifikavimas (loggedInUser);
}
}, []);
if (!authenticated) {
// Peradresuoti
} Kitas {
grąžinti (
<div>
<p>Sveiki atvykę į jūsų prietaisų skydelį</p>
</div>
);
}
};
eksportuotinumatytas Prietaisų skydelis;
Nukreipkite vartotoją į prisijungimo puslapį naudodami navigaciją
Komponentas Navigate pakeitė peradresavimo komponentą, kuris buvo naudojamas React Router v5. Importuoti Naršyti iš react-router-dom.
importuoti { Rodyti kelią } iš „react-router-dom“;
Norėdami peradresuoti neautentifikuotus vartotojus, naudokite jį taip.
if (!authenticated) {
grąžinti <Eikite pakeisti į ="/login" />;
} Kitas {
grąžinti (
<div>
<p>Sveiki atvykę į jūsų prietaisų skydelį</p>
</div>
);
}
Naršymo komponentas yra deklaratyvi API. Jis remiasi vartotojo įvykiu, kuris šiuo atveju yra autentifikavimas, kad būtų pakeista būsena ir dėl to iš naujo pateikiamas komponentas. Atminkite, kad jums nereikia naudoti pakeitimo raktinio žodžio. Jį naudojant pakeičiamas dabartinis URL, o ne perkeliamas į naršyklės istoriją.
Nukreipkite vartotoją į kitą puslapį naudodami useNavigate()
Kita galimybė „React“ atlikti peradresavimus yra useNavigate() kabliukas. Šis kabliukas suteikia prieigą prie navigate imperative API. Pradėkite importuodami jį iš „react-router-dom“.
importuoti { useNavigate } iš „react-router-dom“;
Peradresuoti, kai vartotojas sėkmingai autentifikuotas handleSubmit() veikia taip:
konst naršyti = useNavigate();
konst Prisijungti = () => {
konst naršyti = useNavigate();
const [naudotojo vardas, setusername] = useState("");
const [slaptažodis, nustatyti slaptažodį] = useState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("patvirtintas") || klaidinga)
);
const vartotojai = [{ vartotojo vardas: "Džeinė", Slaptažodis: "bandomasis slaptažodis" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst account = vartotojai.rasti((vartotojas) => vartotojas.naudotojo vardas vartotojo vardas);
jei (sąskaita && account.password slaptažodis) {
localStorage.setItem("patvirtintas", tiesa);
Rodyti kelią("/dashboard");
}
};
grąžinti (
<div>
<forma onSubmit={handleSubmit}>
<įvestis
tipas ="tekstą"
vardas ="Vartotojo vardas"
value={naudotojo vardas}
onChange={(e) => setusername (e.target.value)}
/>
<įvestis
tipas ="Slaptažodis"
vardas ="Slaptažodis"
onChange={(e) => nustatyti slaptažodį (e.target.value)}
/>
<įvesties tipas ="Pateikti" vertė ="Pateikti" />
</form>
</div>
);
};
Šiame pavyzdyje, kai vartotojas pateikia formą su teisinga informacija, jis nukreipiamas į prietaisų skydelį.
Kuriant programas vienas iš tikslų yra suteikti vartotojams geriausią patirtį. Tai galite padaryti grąžindami vartotoją į ankstesnį puslapį, nukreipdami jį į prisijungimo puslapį. Tai galite padaryti palikdami -1, kad naršytumėte taip, naršyti (-1). Tai veikia taip pat, kaip naršyklės grįžimo mygtuko paspaudimas.
Maršrutas „React“.
Šiame straipsnyje sužinojote, kaip galite nukreipti vartotoją į kitą React puslapį, naudodami komponentą Naršyti ir useNavigate() kabliukas. Straipsnyje buvo naudojama prisijungimo forma, siekiant parodyti, kaip galite nukreipti neautentifikuotus vartotojus iš apsaugoto puslapio į prisijungimo puslapį.