Zvyčajne sa pri vytváraní webových aplikácií prihlasovacie stránky používajú na ochranu súkromných stránok. Napríklad v prípade platformy na blogovanie môže byť panel prístupný iba overeným používateľom. Ak sa na túto stránku pokúsi dostať neoverený používateľ, aplikácia ho presmeruje na prihlasovaciu stránku. Po prihlásení získajú prístup.
V tomto článku sa pozrieme na to, ako môžete presmerovať používateľa zo stránky s obmedzeným prístupom na prihlasovaciu stránku. Preberieme tiež, ako môžete používateľa po prihlásení vrátiť späť na stránku, na ktorej sa nachádzal.
V React Router v6 existujú dva spôsoby, ktoré môžete použiť na presmerovanie používateľa – komponent Navigate a useNavigate() háčik.
Vytvorte aplikáciu React
Vytvorte jednoduchú aplikáciu React pomocou create-react-app príkaz. Túto aplikáciu použijete na vyskúšanie, ako funguje komponent Navigácia a useNavigate() háčiková práca.
npx vytvoriť-react-app reagovať-presmerovať
Vytvorte prihlasovaciu stránku
Na overenie používateľov budete musieť vytvoriť prihlasovaciu stránku. Keďže toto nie je návod na autentifikáciu, použite ako databázu užívateľov pole objektov.
Vytvorte nový súbor v src priečinok a pomenujte ho Login.js. Potom pridajte nasledujúci kód do vytvorte prihlasovací formulár.
importovať { useState } od "reagovať";
importovať Dashboard od "./Dashboard";
konšt Prihlásenie = () => {
const [username, setusername] = useState("");
const [heslo, setpassword] = useState("");
konšt [autentizované, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("autentizované")|| falošný));
const users = [{ používateľské meno: "Jane", heslo: "testovacie heslo" }];
konšt handleSubmit = (e) => {
e.preventPredvolené()
konšt účet = users.find((user) => user.username username);
ak (účet && account.password password) {
overené (pravda)
localStorage.setItem("overené", pravda);
}
};
vrátiť (
<div>
<p>Vitaj späť</str>
<form onSubmit={handleSubmit}>
<vstup
typ="text"
meno="Používateľské meno"
value={username}
onChange={(e) => setusername (e.target.value)}
/>
<vstup
typ="heslo"
meno="heslo"
onChange={(e) => setpassword (e.target.value)}
/>
<typ vstupu ="Predložiť" hodnota="Predložiť" />
</form>
</div>
)
};
}
exportpredvolená Prihlásiť sa;
Toto je jednoduchý prihlasovací formulár. Keď používateľ odošle svoje používateľské meno a heslo, skontrolujú sa podľa poľa. Ak sú tieto údaje správne, stav overenia je nastavený na pravda. Keďže budete kontrolovať, či je používateľ autentifikovaný v komponente Dashboard, musíte tiež uložiť stav autentifikácie niekde, ku ktorému majú prístup iné komponenty. Tento článok používa lokálne úložisko. V reálnej aplikácii pomocou Reagovať kontext by bola lepšia voľba.
Vytvorte stránku informačného panela
Pridajte nasledujúci kód do nového súboru s názvom Dashboard.js.
konšt Dashboard = () => {
vrátiť (
<div>
<p>Vitajte na svojom informačnom paneli</str>
</div>
);
};
exportpredvolená prístrojová doska;
Dashboard by mal byť prístupný iba pre overených používateľov. Preto, keď používatelia navštívia stránku dashboardu, najprv skontrolujte, či sú overení. Ak nie sú, presmerujte ich na prihlasovaciu stránku.
Ak to chcete urobiť, najprv nastavte aplikačné trasy pomocou smerovača React.
npm Inštalácia reagovať-smerovač-dom
V index.js nastavte smerovanie pre vašu aplikáciu.
importovať Reagovať od "reagovať";
importovať ReactDOM od "react-dom/client";
importovať App od "./App";
importovať { BrowserRouter, Route, Routes } od "react-router-dom";
importovať Prihlásiť sa od "./Prihlásiť sa";
importovať Dashboard od "./Dashboard";
konšt root = ReactDOM.createRoot(dokument.getElementById("root"));
koreň.vykresliť(
<Reagovať. StrictMode>
<BrowserRouter>
<Trasy>
<Prvok indexu trasy={<Aplikácia />} />
<Cesta trasy ="Prihlásiť sa" element={<Prihlásiť sa />} />
<Cesta trasy ="prístrojová doska" element={<Dashboard />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Chráňte stránku Dashboard
Teraz, keď sú vaše aplikačné trasy nastavené, ďalším krokom je nastaviť trasu palubnej dosky ako súkromnú. Keď sa načíta komponent Dashboard, stav autentifikácie sa získa z lokálneho úložiska a uloží sa do stavu. Ak používateľ nie je overený, aplikácia sa presmeruje na prihlasovaciu stránku, v opačnom prípade zobrazí stránku dashboardu.
importovať { useEffect, useState } od "reagovať";
konšt Dashboard = () => {
konšt [overené, setauthenticated] = useState(nulový);
useEffect(() => {
const logInUser = localStorage.getItem("overené");
if (loggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
if (!autenticated) {
// Presmerovanie
} inak {
vrátiť (
<div>
<p>Vitajte na svojom informačnom paneli</str>
</div>
);
}
};
exportpredvolená prístrojová doska;
Presmerujte používateľa na prihlasovaciu stránku pomocou navigácie
Komponent Navigate nahradil komponent Redirect, ktorý bol použitý v React Router v5. Importovať Navigovať z Reag-router-dom.
importovať { Navigovať } od "react-router-dom";
Ak chcete presmerovať neoverených používateľov, použite ho nasledovne.
if (!autenticated) {
vrátiť <Prejdite na položku nahradiť ="/login" />;
} inak {
vrátiť (
<div>
<p>Vitajte na svojom informačnom paneli</str>
</div>
);
}
Komponent Navigate je deklaratívne API. Spolieha sa na udalosť používateľa, ktorou je v tomto prípade autentifikácia, ktorá spôsobí zmenu stavu a následne spôsobí opätovné vykreslenie komponentu. Všimnite si, že nemusíte použiť kľúčové slovo nahradiť. Jeho použitím sa nahradí aktuálna adresa URL namiesto jej vloženia do histórie prehliadača.
Presmerujte používateľa na inú stránku pomocou useNavigate()
Ďalšou možnosťou na vykonávanie presmerovaní v React je useNavigate() háčik. Tento hák poskytuje prístup k navigačnému imperatívnemu API. Začnite tým, že ho importujete zo servera Reag-router-dom.
importovať { useNavigate } od "react-router-dom";
Presmerujte po úspešnom overení používateľa v handleSubmit() fungovať takto:
konšt navigovať = používaťNavigovať();
konšt Prihlásenie = () => {
konšt navigovať = používaťNavigovať();
const [username, setusername] = useState("");
const [heslo, setpassword] = useState("");
konšt [overené, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("overené") || nepravda)
);
const users = [{ používateľské meno: "Jane", heslo: "testovacie heslo" }];
konšt handleSubmit = (e) => {
e.preventPredvolené();
konšt účet = users.find((user) => user.username username);
ak (účet && account.password password) {
localStorage.setItem("overené", pravda);
navigovať ("/dashboard");
}
};
vrátiť (
<div>
<form onSubmit={handleSubmit}>
<vstup
typ="text"
meno="Používateľské meno"
value={username}
onChange={(e) => setusername (e.target.value)}
/>
<vstup
typ="heslo"
meno="heslo"
onChange={(e) => setpassword (e.target.value)}
/>
<typ vstupu ="Predložiť" hodnota="Predložiť" />
</form>
</div>
);
};
V tomto príklade, keď používateľ odošle formulár so správnymi podrobnosťami, bude presmerovaný na informačný panel.
Pri vytváraní aplikácií je jedným z cieľov poskytnúť používateľom ten najlepší zážitok. Môžete to urobiť tak, že používateľa vrátite späť na stránku, na ktorej bol predtým, a presmerujete ho na prihlasovaciu stránku. Môžete to urobiť tak, že prejdete na -1 a navigujete takto, navigovať (-1). Funguje rovnako ako stlačenie tlačidla Späť v prehliadači.
Smerovanie v Reacte
V tomto článku ste sa naučili, ako môžete presmerovať používateľa na inú stránku v React pomocou komponentu Navigate a useNavigate() háčik. V článku sa použil prihlasovací formulár, aby ukázal, ako môžete presmerovať neoverených používateľov z chránenej stránky na prihlasovaciu stránku.