Parasti, veidojot tīmekļa lietojumprogrammas, privāto lapu aizsardzībai tiek izmantotas pieteikšanās lapas. Piemēram, emuāru veidošanas platformā informācijas panelis var būt pieejams tikai autentificētiem lietotājiem. Ja neautentificēts lietotājs mēģina piekļūt šai lapai, lietojumprogramma novirza viņu uz pieteikšanās lapu. Kad viņi ir pieteikušies, viņi saņem piekļuvi.
Šajā rakstā mēs apskatīsim, kā jūs varat novirzīt lietotāju no ierobežotas lapas uz pieteikšanās lapu. Mēs arī apspriedīsim, kā jūs varat atgriezt lietotāju atpakaļ lapā, kurā viņš bija pēc pieteikšanās.
Programmā React Router v6 ir divi veidi, kā varat novirzīt lietotāju — komponents Navigate un useNavigate() āķis.
Izveidojiet React lietojumprogrammu
Izveidojiet vienkāršu React lietojumprogrammu, izmantojot izveidot-reaģēt-lietotni komandu. Jūs izmantosit šo lietojumprogrammu, lai pārbaudītu, kā komponents Navigēt un useNavigate() āķa darbs.
npx izveidot-react-app reaģēt-redirect
Izveidojiet pieteikšanās lapu
Lai autentificētu lietotājus, jums būs jāizveido pieteikšanās lapa. Tā kā šī nav autentifikācijas apmācība, izmantojiet objektu masīvu kā lietotāju datu bāzi.
Izveidojiet jaunu failu mapē src mapi un nosauciet to Login.js. Pēc tam pievienojiet tālāk norādīto kodu izveidot pieteikšanās veidlapu.
imports { useState } no "reaģēt";
imports Mērinstrumentu panelis no "./Mērinstrumentu panelis";
konst Pieteikšanās = () => {
const [lietotājvārds, iestatītāja vārds] = useState("");
const [parole, iestatīt paroli] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| viltus));
const lietotāji = [{ lietotājvārds: "Džeina", parole: "testa parole" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst konts = lietotāji.atrast((lietotājs) => lietotājs.lietotājvārds lietotājvārds);
ja (konts && account.password parole) {
iestatīts autentificēts (taisnība)
localStorage.setItem("autentificēts", patiess);
}
};
atgriezties (
<div>
<lpp>Laipni lūdzam atpakaļ</lpp>
<forma onSubmit={handleSubmit}>
<ievade
tips="tekstu"
vārds ="Lietotājvārds"
vērtība={lietotājvārds}
onChange={(e) => setusername (e.target.value)}
/>
<ievade
tips="parole"
vārds ="Parole"
onChange={(e) => iestatīt paroli (e.target.value)}
/>
<ievades veids="Iesniegt" vērtība="Iesniegt" />
</form>
</div>
)
};
}
eksportētnoklusējuma Pieslēgties;
Šī ir vienkārša pieteikšanās forma. Kad lietotājs iesniedz savu lietotājvārdu un paroli, tie tiek pārbaudīti pret masīvu. Ja šī informācija ir pareiza, tiek iestatīts autentifikācijas stāvoklis taisnība. Tā kā jūs pārbaudīsit, vai lietotājs ir autentificēts informācijas paneļa komponentā, jums ir arī jāsaglabā autentifikācijas statuss kaut kur, kam var piekļūt citi komponenti. Šajā rakstā tiek izmantota vietējā krātuve. Reālā lietojumprogrammā, izmantojot Reaģējiet uz kontekstu būtu labāka izvēle.
Izveidojiet informācijas paneļa lapu
Pievienojiet šādu kodu jaunā failā ar nosaukumu Dashboard.js.
konst Informācijas panelis = () => {
atgriezties (
<div>
<lpp>Laipni lūdzam informācijas panelī</lpp>
</div>
);
};
eksportētnoklusējuma Mērinstrumentu panelis;
Informācijas panelim ir jābūt pieejamam tikai autentificētiem lietotājiem. Tāpēc, kad lietotāji apmeklē informācijas paneļa lapu, vispirms pārbaudiet, vai viņi ir autentificēti. Ja tā nav, novirziet tos uz pieteikšanās lapu.
Lai to izdarītu, vispirms iestatiet lietojumprogrammu maršrutus, izmantojot React maršrutētāju.
npm uzstādīt reaģēt-router-dom
Programmā index.js iestatiet savas lietojumprogrammas maršrutēšanu.
imports Reaģēt no "reaģēt";
imports ReactDOM no "react-dom/client";
imports App no "./Lietotne";
imports { BrowserRouter, Route, Routes } no "react-router-dom";
imports Pieslēgties no "./Pieslēgties";
imports Mērinstrumentu panelis no "./Mērinstrumentu panelis";
konst root = ReactDOM.createRoot(dokumentu.getElementById("sakne"));
sakne.renderēt(
<Reaģēt. StrictMode>
<BrowserRouter>
<Maršruti>
<Maršruta indeksa elements={<Lietotne />} />
<Maršruta ceļš="Pieslēgties" elements={<Pieslēgties />} />
<Maršruta ceļš="mērinstrumentu panelis" elements={<Mērinstrumentu panelis />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Aizsargājiet informācijas paneļa lapu
Tagad, kad jūsu pieteikšanās maršruti ir iestatīti, nākamais solis ir padarīt informācijas paneļa maršrutu privātu. Kad tiek ielādēts informācijas paneļa komponents, autentifikācijas stāvoklis tiek izgūts no vietējās krātuves un saglabāts stāvoklī. Ja lietotājs nav autentificēts, lietojumprogramma novirzīs uz pieteikšanās lapu, pretējā gadījumā tiks parādīta informācijas paneļa lapa.
imports { useEffect, useState } no "reaģēt";
konst Informācijas panelis = () => {
konst [authenticated, setauthenticated] = useState(null);
useEffect(() => {
const loggedInUser = localStorage.getItem("autentificēts");
if (loggedInUser) {
iestatīta autentifikācija (loggedInUser);
}
}, []);
if (!authenticated) {
// Novirzīt
} cits {
atgriezties (
<div>
<lpp>Laipni lūdzam informācijas panelī</lpp>
</div>
);
}
};
eksportētnoklusējuma Mērinstrumentu panelis;
Novirziet lietotāju uz pieteikšanās lapu, izmantojot navigāciju
Komponents Navigate aizstāj Redirect komponentu, kas tika izmantots React Router v5. Importēt Navigēt no react-router-dom.
imports { Navigēt } no "react-router-dom";
Lai novirzītu neautentificētus lietotājus, izmantojiet to šādi.
if (!authenticated) {
atgriezties <Pārvietojieties uz aizstāt uz="/login" />;
} cits {
atgriezties (
<div>
<lpp>Laipni lūdzam informācijas panelī</lpp>
</div>
);
}
Komponents Navigēt ir deklaratīva API. Tas balstās uz lietotāja notikumu, kas šajā gadījumā ir autentifikācija, lai izraisītu stāvokļa izmaiņas un tādējādi izraisītu komponenta atkārtotu renderēšanu. Ņemiet vērā, ka jums nav jāizmanto aizstāšanas atslēgvārds. Izmantojot to, pašreizējais URL tiek aizstāts, nevis tiek novirzīts uz pārlūkprogrammas vēsturi.
Novirzīt lietotāju uz citu lapu, izmantojot useNavigate()
Otra novirzīšanas veikšanas iespēja programmā React ir useNavigate() āķis. Šis āķis nodrošina piekļuvi obligātajai navigācijas API. Sāciet, importējot to no react-router-dom.
imports { useNavigate } no "react-router-dom";
Pārvirzīt, kad lietotājs ir veiksmīgi autentificēts HandSubmit() darbojas šādi:
konst navigēt = useNavigate();
konst Pieteikšanās = () => {
konst navigēt = useNavigate();
const [lietotājvārds, iestatītāja vārds] = useState("");
const [parole, iestatīt paroli] = useState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("autentificēts") || viltus)
);
const lietotāji = [{ lietotājvārds: "Džeina", parole: "testa parole" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst konts = lietotāji.atrast((lietotājs) => lietotājs.lietotājvārds lietotājvārds);
ja (konts && account.password parole) {
localStorage.setItem("autentificēts", patiess);
pārvietoties("/dashboard");
}
};
atgriezties (
<div>
<forma onSubmit={handleSubmit}>
<ievade
tips="tekstu"
vārds ="Lietotājvārds"
vērtība={lietotājvārds}
onChange={(e) => setusername (e.target.value)}
/>
<ievade
tips="parole"
vārds ="Parole"
onChange={(e) => iestatīt paroli (e.target.value)}
/>
<ievades veids="Iesniegt" vērtība="Iesniegt" />
</form>
</div>
);
};
Šajā piemērā, kad lietotājs iesniedz veidlapu ar pareizo informāciju, viņš tiek novirzīts uz informācijas paneli.
Veidojot lietojumprogrammas, viens no mērķiem ir sniegt lietotājiem vislabāko pieredzi. To var izdarīt, novirzot lietotāju atpakaļ uz lapu, kurā viņš bija iepriekš, novirzot viņu uz pieteikšanās lapu. To var izdarīt, nododot garām -1, lai pārvietotos šādi, pārvietoties (-1). Tas darbojas tāpat kā pārlūkprogrammas pogas Atpakaļ nospiešana.
Maršrutēšana programmā React
Šajā rakstā jūs uzzinājāt, kā varat novirzīt lietotāju uz citu React lapu, izmantojot gan komponentu Navigācija, gan useNavigate() āķis. Rakstā tika izmantota pieteikšanās veidlapa, lai parādītu, kā jūs varat novirzīt neautentificētus lietotājus no aizsargātas lapas uz pieteikšanās lapu.
