Általában webalkalmazások készítésekor a bejelentkezési oldalakat használják a privát oldalak védelmére. Például egy blogíró platform esetében előfordulhat, hogy az irányítópult csak hitelesített felhasználók számára érhető el. Ha egy nem hitelesített felhasználó megpróbál hozzáférni az oldalhoz, az alkalmazás átirányítja őt a bejelentkezési oldalra. Miután bejelentkeztek, hozzáférést kapnak.
Ebben a cikkben megvizsgáljuk, hogyan irányíthat át egy felhasználót egy korlátozott oldalról a bejelentkezési oldalra. Megbeszéljük azt is, hogyan tudja visszaküldeni a felhasználót arra az oldalra, amelyen bejelentkezés után volt.
A React Router v6-ban kétféleképpen irányíthatja át a felhasználót: a Navigate komponens és a useNavigate() horog.
Hozzon létre egy React alkalmazást
Hozzon létre egy egyszerű React alkalmazást a Alkalmazás létrehozása-reagálása parancs. Ezzel az alkalmazással tesztelheti, hogyan működik a Navigálás összetevő és a useNavigate() horog munka.
npx teremt-react-app react-redirect
Hozzon létre egy bejelentkezési oldalt
A felhasználók hitelesítéséhez létre kell hoznia egy bejelentkezési oldalt. Mivel ez nem hitelesítési oktatóanyag, használjon objektumok tömbjét felhasználói adatbázisként.
Hozzon létre egy új fájlt a src mappát, és nevezze el Login.js. Ezután adja hozzá a következő kódot: hozza létre a bejelentkezési űrlapot.
import { useState } tól től "reagál";
import Irányítópult tól től "./Irányítópult";
const Bejelentkezés = () => {
const [felhasználónév, setusername] = useState("");
const [jelszó, jelszó beállítása] = useState("");
const [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| hamis));
const users = [{ felhasználónév: "Jane", Jelszó: "tesztjelszó" }];
const handleSubmit = (e) => {
e.preventDefault()
const account = user.find((user) => user.username felhasználónév);
ha (számla && account.password jelszó) {
beállítva (igaz)
localStorage.setItem("hitelesített", igaz);
}
};
Visszatérés (
<div>
<p>Üdv újra</p>
<form onSubmit={handleSubmit}>
<bemenet
típus="szöveg"
név="Felhasználónév"
érték={felhasználónév}
onChange={(e) => setusername (e.target.value)}
/>
<bemenet
típus="Jelszó"
név="Jelszó"
onChange={(e) => setpassword (e.target.value)}
/>
<bemenet típusa="Beküldés" érték="Beküldés" />
</form>
</div>
)
};
}
exportalapértelmezett Belépés;
Ez egy egyszerű bejelentkezési űrlap. Amikor egy felhasználó elküldi felhasználónevét és jelszavát, a rendszer összeveti őket a tömbbel. Ha ezek az adatok helyesek, a hitelesített állapot a következőre van állítva igaz. Mivel ellenőrizni fogja, hogy a felhasználó hitelesítve van-e a Dashboard összetevőben, a hitelesítési állapotot is el kell tárolnia valahol, ahol más összetevők is hozzáférhetnek. Ez a cikk helyi tárhelyet használ. Valós alkalmazásban, használatával Reagáljon a kontextusra jobb választás lenne.
Hozzon létre egy irányítópult-oldalt
Adja hozzá a következő kódot egy új nevű fájlhoz Dashboard.js.
const Irányítópult = () => {
Visszatérés (
<div>
<p>Üdvözöljük az irányítópulton</p>
</div>
);
};
exportalapértelmezett Irányítópult;
Az irányítópult csak hitelesített felhasználók számára legyen elérhető. Ezért amikor a felhasználók felkeresik az irányítópultot, először ellenőrizze, hogy hitelesítették-e őket. Ha nem, irányítsa át őket a bejelentkezési oldalra.
Ehhez először állítsa be az alkalmazási útvonalakat a React router segítségével.
npm telepítés react-router-dom
Az index.js fájlban állítsa be az alkalmazás útválasztását.
import Reagál tól től "reagál";
import ReactDOM tól től "react-dom/kliens";
import App tól től "./App";
import { BrowserRouter, Route, Routes } tól től "react-router-dom";
import Belépés tól től "./Belépés";
import Irányítópult tól től "./Irányítópult";
const root = ReactDOM.createRoot(dokumentum.getElementById("root"));
gyökér.Vakol(
<Reagál. StrictMode>
<BrowserRouter>
<Útvonalak>
<Útvonalindex elem={<Alkalmazás />} />
<Útvonal útvonala="Belépés" elem={<Belépés />} />
<Útvonal útvonala="Irányítópult" elem={<Irányítópult />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Védje az irányítópult oldalát
Most, hogy az alkalmazási útvonalak be vannak állítva, a következő lépés az tegye priváttá az irányítópult útvonalát. Amikor a Dashboard összetevő betöltődik, a hitelesítési állapotot a rendszer lekéri a helyi tárolóból, és ebben az állapotban tárolja. Ha a felhasználó nincs hitelesítve, az alkalmazás átirányít a bejelentkezési oldalra, ellenkező esetben az irányítópult oldala jelenik meg.
import { useEffect, useState } tól től "reagál";
const Irányítópult = () => {
const [authenticated, setauthenticated] = useState(nulla);
useEffect(() => {
const loggedInUser = localStorage.getItem("hitelesített");
if (loggedInUser) {
beállított hitelesítés (loggedInUser);
}
}, []);
if (!hitelesített) {
// Átirányítás
} más {
Visszatérés (
<div>
<p>Üdvözöljük az irányítópulton</p>
</div>
);
}
};
exportalapértelmezett Irányítópult;
A felhasználó átirányítása a bejelentkezési oldalra a Navigáció segítségével
A Navigate összetevő felváltotta a React Router v5-ben használt átirányítási összetevőt. Importálás Navigálás a react-router-dom webhelyről.
import { Hajózik } tól től "react-router-dom";
A nem hitelesített felhasználók átirányításához használja az alábbiak szerint.
if (!hitelesített) {
Visszatérés <Navigáljon a csere erre="/login" />;
} más {
Visszatérés (
<div>
<p>Üdvözöljük az irányítópulton</p>
</div>
);
}
A Navigálás összetevő egy deklaratív API. Egy felhasználói eseményre támaszkodik, amely ebben az esetben a hitelesítés állapotváltozást okoz, és ennek következtében egy komponens újrarenderelését idézi elő. Vegye figyelembe, hogy nem kell a helyettesítő kulcsszót használnia. Használata lecseréli az aktuális URL-t, ahelyett, hogy a böngésző előzményei közé helyezné.
Felhasználó átirányítása egy másik oldalra a useNavigate() segítségével
A másik lehetőség az átirányítások végrehajtására a Reactban a useNavigate() horog. Ez a hook hozzáférést biztosít a navigate imperative API-hoz. Kezdje azzal, hogy importálja a react-router-dom webhelyről.
import { useNavigate } tól től "react-router-dom";
Átirányítás, ha a felhasználó sikeresen hitelesítésre került a handleSubmit() így működik:
const navigate = useNavigate();
const Bejelentkezés = () => {
const navigate = useNavigate();
const [felhasználónév, setusername] = useState("");
const [jelszó, jelszó beállítása] = useState("");
const [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("hitelesített") || hamis)
);
const users = [{ felhasználónév: "Jane", Jelszó: "tesztjelszó" }];
const handleSubmit = (e) => {
e.preventDefault();
const account = user.find((user) => user.username felhasználónév);
ha (számla && account.password jelszó) {
localStorage.setItem("hitelesített", igaz);
hajózik("/dashboard");
}
};
Visszatérés (
<div>
<form onSubmit={handleSubmit}>
<bemenet
típus="szöveg"
név="Felhasználónév"
érték={felhasználónév}
onChange={(e) => setusername (e.target.value)}
/>
<bemenet
típus="Jelszó"
név="Jelszó"
onChange={(e) => setpassword (e.target.value)}
/>
<bemenet típusa="Beküldés" érték="Beküldés" />
</form>
</div>
);
};
Ebben a példában, ha a felhasználó elküldi az űrlapot a megfelelő adatokkal, a rendszer átirányítja az irányítópultra.
Alkalmazások készítésekor az egyik cél, hogy a felhasználók a legjobb élményt nyújtsák. Ezt úgy teheti meg, hogy visszaviszi a felhasználót arra az oldalra, ahol korábban volt, és átirányítja a bejelentkezési oldalra. Ezt a -1 átadásával teheti meg, hogy így navigáljon, navigálás (-1). Ugyanúgy működik, mint a böngésző vissza gombjának megnyomása.
Útválasztás a Reactban
Ebből a cikkből megtudta, hogyan irányíthat át egy felhasználót egy másik oldalra a React alkalmazásban a Navigálás összetevő és a useNavigate() horog. A cikk egy bejelentkezési űrlapot használt annak bemutatására, hogyan irányíthatja át a nem hitelesített felhasználókat egy védett oldalról a bejelentkezési oldalra.