Zwykle podczas tworzenia aplikacji internetowych strony logowania służą do ochrony stron prywatnych. Na przykład w przypadku platformy blogowej pulpit nawigacyjny może być dostępny tylko dla uwierzytelnionych użytkowników. Jeśli nieuwierzytelniony użytkownik spróbuje uzyskać dostęp do tej strony, aplikacja przekieruje go na stronę logowania. Po zalogowaniu uzyskują dostęp.
W tym artykule przyjrzymy się, jak przekierować użytkownika ze strony z ograniczeniami na stronę logowania. Omówimy również, w jaki sposób można przywrócić użytkownika do strony, na której był po zalogowaniu.
W React Router v6 istnieją dwa sposoby przekierowania użytkownika — komponent Navigate i użyjNawiguj() hak.
Utwórz aplikację React
Utwórz prostą aplikację React za pomocą aplikacja-stwórz-reaguj Komenda. Użyjesz tej aplikacji, aby przetestować, w jaki sposób komponent Navigate i użyjNawiguj() hak pracy.
npx Stwórz-react-app przekieruj-reaguj
Utwórz stronę logowania
Będziesz musiał utworzyć stronę logowania, aby uwierzytelnić użytkowników. Ponieważ nie jest to samouczek dotyczący uwierzytelniania, użyj tablicy obiektów jako bazy danych użytkownika.
Utwórz nowy plik w src folder i nazwij go Login.js. Następnie dodaj następujący kod, aby utwórz formularz logowania.
import { stan użycia } z "reagować";
import Panel z "./Panel";
stały Zaloguj się = () => {
const [nazwa użytkownika, setnazwa użytkownika] = useState("");
const [hasło, setpassword] = useState("");
stały [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| fałszywy));
const użytkownicy = [{ nazwa użytkownika: "Jane", hasło: "hasło testowe" }];
stały uchwytPrześlij = (e) => {
mi.zapobiegaj domyślnie()
stały konto = users.find((user) => użytkownik.nazwa użytkownika nazwa użytkownika);
jeśli (konto && konto.hasło hasło) {
uwierzytelniony (PRAWDA)
localStorage.setItem("zalegalizowany", PRAWDA);
}
};
zwrócić (
<div>
<p>Witamy spowrotem</p>
<formularz onSubmit={handleSubmit}>
<Wejście
typ="tekst"
nazwa="Nazwa użytkownika"
wartość={nazwa użytkownika}
onChange={(e) => setusername (e.target.value)}
/>
<Wejście
typ="hasło"
nazwa="Hasło"
onChange={(e) => setpassword (e.target.value)}
/>
<typ wejścia="Zatwierdź" wartość="Składać" />
</form>
</div>
)
};
}
eksportdomyślna Zaloguj sie;
To jest prosty formularz logowania. Gdy użytkownik podaje swoją nazwę użytkownika i hasło, są one sprawdzane w tablicy. Jeśli te dane są poprawne, stan uwierzytelnienia jest ustawiony na PRAWDA. Ponieważ będziesz sprawdzać, czy użytkownik jest uwierzytelniony w komponencie Dashboard, musisz również przechowywać status uwierzytelniania w miejscu, do którego mają dostęp inne komponenty. W tym artykule jest używana pamięć lokalna. W prawdziwej aplikacji, używając Reaguj na kontekst byłby lepszym wyborem.
Utwórz stronę pulpitu
Dodaj następujący kod w nowym pliku o nazwie Panel.js.
stały Pulpit = () => {
zwrócić (
<div>
<p>Witamy w Twoim pulpicie nawigacyjnym</p>
</div>
);
};
eksportdomyślna Panel;
Pulpit nawigacyjny powinien być dostępny tylko dla uwierzytelnionych użytkowników. Dlatego, gdy użytkownicy odwiedzają stronę pulpitu nawigacyjnego, najpierw sprawdź, czy są uwierzytelnieni. Jeśli nie, przekieruj ich na stronę logowania.
Aby to zrobić, najpierw skonfiguruj trasy aplikacji za pomocą routera React.
npm zainstalować React-router-dom
W index.js skonfiguruj routing dla swojej aplikacji.
import Reagować z "reagować";
import ReactDOM z "react-dom/klient";
import Aplikacja z "./Aplikacja";
import { BrowserRouter, Trasa, Trasy } z „react-router-dom”;
import Zaloguj sie z "./Zaloguj sie";
import Panel z "./Panel";
stały root = ReactDOM.createRoot(dokument.getElementById("root"));
źródło.renderowanie(
<Reagować. Tryb ścisły>
<PrzeglądarkaRouter>
<Trasy>
<Element indeksu trasy={<Aplikacja />} />
<Ścieżka trasy="Zaloguj sie" element={<Zaloguj sie />} />
<Ścieżka trasy="panel" element={<Panel />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Chroń stronę pulpitu nawigacyjnego
Teraz, gdy trasy aplikacji są skonfigurowane, następnym krokiem jest: ustaw trasę na desce rozdzielczej jako prywatną. Po załadowaniu składnika Dashboard stan uwierzytelniania jest pobierany z pamięci lokalnej i przechowywany w stanie. Jeśli użytkownik nie jest uwierzytelniony, aplikacja przekieruje do strony logowania, w przeciwnym razie wyświetli stronę dashboardu.
import { useEffect, useState } z "reagować";
stały Pulpit = () => {
stały [uwierzytelniony, uwierzytelniony] = useState(zero);
useEffect(() => {
const zalogowanyUżytkownik = localStorage.getItem("zalegalizowany");
jeśli (zalogowanyUżytkownik) {
setauthenticated (loggedInUser);
}
}, []);
jeśli (!uwierzytelniony) {
// Przekieruj
} w przeciwnym razie {
zwrócić (
<div>
<p>Witamy w Twoim pulpicie nawigacyjnym</p>
</div>
);
}
};
eksportdomyślna Panel;
Przekieruj użytkownika do strony logowania za pomocą nawigacji
Komponent Navigate zastąpił komponent Redirect, który był używany w React Router v5. Importuj Nawiguj z React-router-dom.
import { Nawiguj } z „react-router-dom”;
Aby przekierować nieuwierzytelnionych użytkowników, użyj go w następujący sposób.
jeśli (!uwierzytelniony) {
zwrócić <Przejdź do zamiany na="/login" />;
} w przeciwnym razie {
zwrócić (
<div>
<p>Witamy w Twoim pulpicie nawigacyjnym</p>
</div>
);
}
Komponent Navigate jest deklaratywnym interfejsem API. Opiera się na zdarzeniu użytkownika, które w tym przypadku jest uwierzytelnieniem, aby spowodować zmianę stanu, a w konsekwencji spowodować ponowne renderowanie składnika. Pamiętaj, że nie musisz używać słowa kluczowego replace. Użycie go zastępuje bieżący adres URL zamiast umieszczać go w historii przeglądarki.
Przekieruj użytkownika na inną stronę za pomocą useNavigate()
Inną opcją wykonywania przekierowań w React jest użyjNawiguj() hak. Ten zaczep zapewnia dostęp do imperatywnego interfejsu API nawigacji. Zacznij od zaimportowania go z React-router-dom.
import { użyjNawiguj } z „react-router-dom”;
Przekieruj po pomyślnym uwierzytelnieniu użytkownika w obsługujWyślij() funkcjonować tak:
stały nawigacja = użyjNawiguj();
stały Zaloguj się = () => {
stały nawigacja = użyjNawiguj();
const [nazwa użytkownika, setnazwa użytkownika] = useState("");
const [hasło, setpassword] = useState("");
stały [uwierzytelniony, uwierzytelniony] = useState(
localStorage.getItem (localStorage.getItem("zalegalizowany") || fałszywy)
);
const użytkownicy = [{ nazwa użytkownika: "Jane", hasło: "hasło testowe" }];
stały uchwytPrześlij = (e) => {
mi.zapobiegaj domyślnie();
stały konto = users.find((user) => użytkownik.nazwa użytkownika nazwa użytkownika);
jeśli (konto && konto.hasło hasło) {
localStorage.setItem("zalegalizowany", PRAWDA);
nawigować("/dashboard");
}
};
zwrócić (
<div>
<formularz onSubmit={handleSubmit}>
<Wejście
typ="tekst"
nazwa="Nazwa użytkownika"
wartość={nazwa użytkownika}
onChange={(e) => setusername (e.target.value)}
/>
<Wejście
typ="hasło"
nazwa="Hasło"
onChange={(e) => setpassword (e.target.value)}
/>
<typ wejścia="Zatwierdź" wartość="Składać" />
</form>
</div>
);
};
W tym przykładzie, gdy użytkownik prześle formularz z poprawnymi danymi, zostanie przekierowany do pulpitu nawigacyjnego.
Podczas tworzenia aplikacji jednym z celów jest zapewnienie użytkownikom jak najlepszych doświadczeń. Możesz to zrobić, przenosząc użytkownika z powrotem na poprzednią stronę, przekierowując go na stronę logowania. Możesz to zrobić, przekazując -1, aby nawigować w ten sposób, nawiguj(-1). Działa tak samo, jak naciśnięcie przycisku Wstecz w przeglądarce.
Routing w React
Z tego artykułu dowiedziałeś się, jak przekierować użytkownika na inną stronę w React za pomocą zarówno komponentu Navigate, jak i użyjNawiguj() hak. W artykule wykorzystano formularz logowania, aby zademonstrować, w jaki sposób można przekierować nieuwierzytelnionych użytkowników ze strony chronionej na stronę logowania.
