Normalt, når du bygger webapplikationer, bruges login-sider til at beskytte private sider. For eksempel, for en blogging-platform, er dashboardet muligvis kun tilgængeligt for godkendte brugere. Hvis en uautoriseret bruger forsøger at få adgang til denne side, omdirigerer applikationen vedkommende til login-siden. Når de er logget ind, får de adgang.
I denne artikel vil vi se på, hvordan du kan omdirigere en bruger fra en begrænset side til en login-side. Vi vil også diskutere, hvordan du kan returnere brugeren tilbage til den side, de var på efter at have logget ind.
I React Router v6 er der to måder, du kan bruge til at omdirigere en bruger - Naviger-komponenten og useNavigate() krog.
Opret en React-applikation
Opret en simpel React-applikation ved hjælp af opret-reager-app kommando. Du skal bruge denne applikation til at teste, hvordan Naviger-komponenten og useNavigate() krog arbejde.
npx skab-react-app react-redirect
Opret en login-side
Du skal oprette en login-side for at godkende brugere. Da dette ikke er en godkendelsesvejledning, skal du bruge en række objekter som brugerdatabase.
Opret en ny fil i src mappe og navngiv den Login.js. Tilføj derefter følgende kode, til oprette login-formularen.
importere { useState } fra "reagere";
importere Dashboard fra "./Dashboard";
konst Login = () => {
const [brugernavn, sætbrugernavn] = useState("");
const [adgangskode, sætadgangskode] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| falsk));
const brugere = [{ brugernavn: "Jane", adgangskode: "testadgangskode" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst konto = brugere.find((bruger) => bruger.brugernavn brugernavn);
hvis (konto && account.password adgangskode) {
setautenticated(rigtigt)
localStorage.setItem("autentificeret", rigtigt);
}
};
Vend tilbage (
<div>
<s>Velkommen tilbage</s>
<form onSubmit={handleSubmit}>
<input
type="tekst"
navn="Brugernavn"
værdi={brugernavn}
onChange={(e) => sætbrugernavn (e.target.value)}
/>
<input
type="adgangskode"
navn="Adgangskode"
onChange={(e) => setpassword (e.target.value)}
/>
<input type="Indsend" værdi="Indsend" />
</form>
</div>
)
};
}
eksportStandard Log på;
Dette er en simpel login-formular. Når en bruger indsender deres brugernavn og adgangskode, kontrolleres de mod arrayet. Hvis disse oplysninger er korrekte, sættes den godkendte tilstand til rigtigt. Da du vil kontrollere, om brugeren er autentificeret i Dashboard-komponenten, skal du også gemme godkendelsesstatussen et sted, som andre komponenter kan få adgang til. Denne artikel bruger lokal lagring. I en rigtig applikation, ved hjælp af Reager kontekst ville være et bedre valg.
Opret en Dashboard-side
Tilføj følgende kode i en ny fil kaldet Dashboard.js.
konst Dashboard = () => {
Vend tilbage (
<div>
<s>Velkommen til dit Dashboard</s>
</div>
);
};
eksportStandard Dashboard;
Dashboardet bør kun være tilgængeligt for godkendte brugere. Derfor, når brugere besøger dashboard-siden, skal du først kontrollere, om de er godkendt. Hvis de ikke er det, skal du omdirigere dem til login-siden.
For at gøre dette skal du først konfigurere applikationsruterne ved hjælp af React-routeren.
npm installere reagere-router-dom
I index.js skal du konfigurere routing for din applikation.
importere Reagere fra "reagere";
importere ReactDOM fra "reager-dom/klient";
importere App fra "./App";
importere { BrowserRouter, Rute, Ruter } fra "reager-router-dom";
importere Log på fra "./Log på";
importere Dashboard fra "./Dashboard";
konst root = ReactDOM.createRoot(dokument.getElementById("root"));
rod.render(
<Reagere. StrictMode>
<BrowserRouter>
<Ruter>
<Ruteindekselement={<App />} />
<Rutesti="Log på" element={<Log på />} />
<Rutesti="dashboard" element={<Dashboard />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Beskyt Dashboard-siden
Nu hvor dine ansøgningsruter er sat op, er næste trin at gør dashboard-ruten privat. Når Dashboard-komponenten indlæses, hentes godkendelsestilstanden fra det lokale lager og gemmes i tilstanden. Hvis brugeren ikke er godkendt, vil applikationen omdirigere til login-siden, ellers vil den vise dashboard-siden.
importere { useEffect, useState } fra "reagere";
konst Dashboard = () => {
konst [authenticated, setauthenticated] = useState(nul);
useEffect(() => {
const loggedInUser = localStorage.getItem("autentificeret");
if (loggedInUser) {
setautenticated (loggedInUser);
}
}, []);
if (!godkendt) {
// Omdiriger
} andet {
Vend tilbage (
<div>
<s>Velkommen til dit Dashboard</s>
</div>
);
}
};
eksportStandard Dashboard;
Omdiriger bruger til login-side ved hjælp af Naviger
Navigate-komponenten erstattede Redirect-komponenten, der blev brugt i React Router v5. Importer Naviger fra react-router-dom.
importere { Naviger } fra "reager-router-dom";
For at omdirigere uautoriserede brugere skal du bruge det som følger.
if (!godkendt) {
Vend tilbage <Naviger erstat til="/login" />;
} andet {
Vend tilbage (
<div>
<s>Velkommen til dit Dashboard</s>
</div>
);
}
Navigate-komponenten er en deklarativ API. Den er afhængig af en brugerhændelse, som i dette tilfælde er godkendelse for at forårsage en tilstandsændring og som følge heraf forårsage en komponentgengivelse. Bemærk, at du ikke behøver at bruge søgeordet erstatning. Brug af den erstatter den aktuelle URL i stedet for at skubbe den til browserens historik.
Omdiriger bruger til en anden side ved hjælp af useNavigate()
Den anden mulighed for at udføre omdirigeringer i React er useNavigate() krog. Denne krog giver adgang til navigeringsimperative API. Start med at importere det fra react-router-dom.
importere { useNavigate } fra "reager-router-dom";
Omdiriger, når brugeren er blevet godkendt i handleSubmit() fungerer sådan her:
konst navigate = useNavigate();
konst Login = () => {
konst navigate = useNavigate();
const [brugernavn, sætbrugernavn] = useState("");
const [adgangskode, sætadgangskode] = useState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("autentificeret") || falsk)
);
const brugere = [{ brugernavn: "Jane", adgangskode: "testadgangskode" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst konto = brugere.find((bruger) => bruger.brugernavn brugernavn);
hvis (konto && account.password adgangskode) {
localStorage.setItem("autentificeret", rigtigt);
navigere("/dashboard");
}
};
Vend tilbage (
<div>
<form onSubmit={handleSubmit}>
<input
type="tekst"
navn="Brugernavn"
værdi={brugernavn}
onChange={(e) => sætbrugernavn (e.target.value)}
/>
<input
type="adgangskode"
navn="Adgangskode"
onChange={(e) => setpassword (e.target.value)}
/>
<input type="Indsend" værdi="Indsend" />
</form>
</div>
);
};
I dette eksempel, når brugeren indsender formularen med de korrekte detaljer, bliver de omdirigeret til dashboardet.
Når man laver applikationer, er et af målene at give brugerne den bedste oplevelse. Du kan gøre dette ved at tage brugeren tilbage til den side, de var før, ved at omdirigere dem til login-siden. Du kan gøre dette ved at sende -1 for at navigere på denne måde, naviger (-1). Det fungerer på samme måde som at trykke på tilbage-knappen på din browser.
Routing i React
I denne artikel lærte du, hvordan du kan omdirigere en bruger til en anden side i React ved at bruge både Naviger-komponenten og useNavigate() krog. Artiklen brugte en loginformular til at demonstrere, hvordan du kan omdirigere uautoriserede brugere fra en beskyttet side til loginsiden.
