Obvykle se při vytváření webových aplikací používají přihlašovací stránky k ochraně soukromých stránek. Například u blogovací platformy může být řídicí panel přístupný pouze ověřeným uživatelům. Pokud se neověřený uživatel pokusí o přístup na tuto stránku, aplikace jej přesměruje na přihlašovací stránku. Jakmile jsou přihlášeni, získají přístup.
V tomto článku se podíváme na to, jak můžete přesměrovat uživatele ze stránky s omezeným přístupem na přihlašovací stránku. Probereme také, jak můžete vrátit uživatele zpět na stránku, na které byl po přihlášení.
V React Router v6 existují dva způsoby, jak můžete uživatele přesměrovat – komponenta Navigate a useNavigate() háček.
Vytvořte aplikaci React
Vytvořte jednoduchou aplikaci React pomocí create-react-app příkaz. Tuto aplikaci použijete k vyzkoušení, jak funguje komponenta Navigace a useNavigate() hákovou práci.
npx vytvořit-react-app reagovat-přesměrování
Vytvořte přihlašovací stránku
Pro ověření uživatelů budete muset vytvořit přihlašovací stránku. Protože se nejedná o výukový program ověřování, použijte jako databázi uživatelů pole objektů.
Vytvořte nový soubor v src složku a pojmenujte ji Login.js. Poté přidejte následující kód do vytvořit přihlašovací formulář.
import { useState } z "reagovat";
import Přístrojová deska z "./Přístrojová deska";
konst Přihlášení = () => {
const [uživatelské jméno, setusername] = useState("");
const [heslo, setpassword] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| Nepravdivé));
const users = [{ uživatelské jméno: "Jane", Heslo: "testovací heslo" }];
konst handleSubmit = (e) => {
E.preventDefault()
konst účet = users.find((user) => user.username uživatelské jméno);
pokud (účet && account.password password) {
nastaveno ověření (skutečný)
localStorage.setItem("ověřené", skutečný);
}
};
vrátit se (
<div>
<p>Vítej zpět</str>
<form onSubmit={handleSubmit}>
<vstup
typ="text"
jméno="Uživatelské jméno"
value={username}
onChange={(e) => setusername (e.target.value)}
/>
<vstup
typ="Heslo"
jméno="Heslo"
onChange={(e) => setpassword (e.target.value)}
/>
<typ vstupu ="Předložit" hodnota="Předložit" />
</form>
</div>
)
};
}
vývoznívýchozí Přihlásit se;
Toto je jednoduchý přihlašovací formulář. Když uživatel odešle své uživatelské jméno a heslo, jsou porovnány s polem. Pokud jsou tyto údaje správné, je stav ověření nastaven na skutečný. Vzhledem k tomu, že budete kontrolovat, zda je uživatel ověřen v komponentě Dashboard, musíte také uložit stav autentizace někde, kam mají přístup ostatní komponenty. Tento článek používá místní úložiště. V reálné aplikaci pomocí Reagovat na kontext by byla lepší volba.
Vytvořte stránku řídicího panelu
Přidejte následující kód do nového souboru s názvem Dashboard.js.
konst Dashboard = () => {
vrátit se (
<div>
<p>Vítejte na svém hlavním panelu</str>
</div>
);
};
vývoznívýchozí Přístrojová deska;
Řídicí panel by měl být přístupný pouze ověřeným uživatelům. Proto, když uživatelé navštíví stránku řídicího panelu, nejprve zkontrolujte, zda jsou ověřeni. Pokud nejsou, přesměrujte je na přihlašovací stránku.
Chcete-li to provést, nejprve nastavte aplikační trasy pomocí směrovače React.
npm Nainstalujte reagovat-router-dom
V index.js nastavte směrování pro vaši aplikaci.
import Reagovat z "reagovat";
import ReactDOM z "react-dom/client";
import Aplikace z "./Aplikace";
import { BrowserRouter, Route, Routes } z "react-router-dom";
import Přihlásit se z "./Přihlásit se";
import Přístrojová deska z "./Přístrojová deska";
konst root = ReactDOM.createRoot(dokument.getElementById("root"));
vykořenit.poskytnout(
<Reagovat. StrictMode>
<BrowserRouter>
<Trasy>
<Prvek indexu trasy={<Aplikace />} />
<Cesta cesty ="přihlásit se" element={<Přihlásit se />} />
<Cesta cesty ="přístrojová deska" element={<Přístrojová deska />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Chraňte stránku Dashboard
Nyní, když jsou vaše aplikační trasy nastaveny, je dalším krokem k nastavit trasu řídicího panelu jako soukromou. Když se komponenta Dashboard načte, stav ověřování se načte z místního úložiště a uloží se do stavu. Pokud uživatel není ověřen, aplikace se přesměruje na přihlašovací stránku, jinak zobrazí stránku dashboard.
import { useEffect, useState } z "reagovat";
konst Dashboard = () => {
konst [authenticated, setauthenticated] = useState(nula);
useEffect(() => {
const logInUser = localStorage.getItem("ověřené");
if (loggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
if (!autenticated) {
// Přesměrování
} jiný {
vrátit se (
<div>
<p>Vítejte na svém hlavním panelu</str>
</div>
);
}
};
vývoznívýchozí Přístrojová deska;
Přesměrujte uživatele na přihlašovací stránku pomocí navigace
Komponenta Navigate nahradila komponentu Redirect, která byla použita v React Router v5. Importovat Navigovat z reagovat-router-dom.
import { Navigovat } z "react-router-dom";
Chcete-li přesměrovat neověřené uživatele, použijte jej následovně.
if (!autenticated) {
vrátit se <Přejděte k nahrazení ="/login" />;
} jiný {
vrátit se (
<div>
<p>Vítejte na svém hlavním panelu</str>
</div>
);
}
Komponenta Navigate je deklarativní API. Spoléhá na uživatelskou událost, kterou je v tomto případě autentizace, která způsobí změnu stavu a následně způsobí opětovné vykreslení komponenty. Všimněte si, že nemusíte použít klíčové slovo nahradit. Jeho použití nahradí aktuální adresu URL namísto jejího vložení do historie prohlížeče.
Přesměrování uživatele na jinou stránku pomocí useNavigate()
Další možností pro provádění přesměrování v Reactu je useNavigate() háček. Tento hák poskytuje přístup k rozhraní API pro navigaci. Začněte tím, že jej importujete z Reag-router-dom.
import { useNavigate } z "react-router-dom";
Přesměrujte, jakmile je uživatel úspěšně ověřen v handleSubmit() fungovat takto:
konst navigovat = useNavigovat();
konst Přihlášení = () => {
konst navigovat = useNavigovat();
const [uživatelské jméno, setusername] = useState("");
const [heslo, setpassword] = useState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("ověřené") || Nepravdivé)
);
const users = [{ uživatelské jméno: "Jane", Heslo: "testovací heslo" }];
konst handleSubmit = (e) => {
E.preventDefault();
konst účet = users.find((user) => user.username uživatelské jméno);
pokud (účet && account.password password) {
localStorage.setItem("ověřené", skutečný);
navigovat("/dashboard");
}
};
vrátit se (
<div>
<form onSubmit={handleSubmit}>
<vstup
typ="text"
jméno="Uživatelské jméno"
value={username}
onChange={(e) => setusername (e.target.value)}
/>
<vstup
typ="Heslo"
jméno="Heslo"
onChange={(e) => setpassword (e.target.value)}
/>
<typ vstupu ="Předložit" hodnota="Předložit" />
</form>
</div>
);
};
V tomto příkladu, jakmile uživatel odešle formulář se správnými podrobnostmi, je přesměrován na řídicí panel.
Při vytváření aplikací je jedním z cílů poskytnout uživatelům ten nejlepší zážitek. Můžete to udělat tak, že uživatele vrátíte zpět na stránku, na které byl předtím, přesměrováním na přihlašovací stránku. Můžete to udělat tak, že předáte -1 a navigujete takto, navigovat (-1). Funguje to stejně jako stisknutí tlačítka Zpět ve vašem prohlížeči.
Směrování v Reactu
V tomto článku jste se naučili, jak můžete přesměrovat uživatele na jinou stránku v Reactu pomocí komponenty Navigate a useNavigate() háček. V článku byl použit přihlašovací formulář k demonstraci toho, jak můžete přesměrovat neověřené uživatele z chráněné stránky na přihlašovací stránku.
