Vanligtvis, när man bygger webbapplikationer, används inloggningssidor för att skydda privata sidor. Till exempel, för en bloggplattform, kan instrumentpanelen endast vara tillgänglig för autentiserade användare. Om en oautentiserad användare försöker komma åt den sidan, omdirigerar applikationen dem till inloggningssidan. När de väl är inloggade får de tillgång.
I den här artikeln kommer vi att titta på hur du kan omdirigera en användare från en begränsad sida till en inloggningssida. Vi kommer också att diskutera hur du kan återföra användaren till sidan de var på efter att ha loggat in.
I React Router v6 finns det två sätt du kan använda för att omdirigera en användare - Navigate-komponenten och useNavigate() krok.
Skapa en React-applikation
Skapa en enkel React-applikation med hjälp av skapa-reagera-app kommando. Du kommer att använda den här applikationen för att testa hur Navigate-komponenten och useNavigate() krokarbete.
npx skapa-react-app react-redirect
Skapa en inloggningssida
Du måste skapa en inloggningssida för att autentisera användare. Eftersom detta inte är en självstudiekurs för autentisering, använd en uppsättning objekt som användardatabas.
Skapa en ny fil i src mapp och namnge den Login.js. Lägg sedan till följande kod, till skapa inloggningsformuläret.
importera { useState } från "reagera";
importera instrumentbräda från "./Instrumentbräda";
konst Logga in = () => {
const [användarnamn, setusername] = useState("");
const [lösenord, setlösenord] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| falsk));
const användare = [{ användarnamn: "Jane", Lösenord: "testlösenord" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst account = users.find((användare) => användarnamn.användarnamn användarnamn);
om (konto && account.password lösenord) {
setautenticated(Sann)
localStorage.setItem("autentiserade", Sann);
}
};
lämna tillbaka (
<div>
<sid>Välkommen tillbaka</s>
<form onSubmit={handleSubmit}>
<inmatning
typ="text"
namn="Användarnamn"
värde={användarnamn}
onChange={(e) => setusername (e.target.value)}
/>
<inmatning
typ="Lösenord"
namn="Lösenord"
onChange={(e) => setpassword (e.target.value)}
/>
<ingångstyp="Skicka in" värde="Skicka in" />
</form>
</div>
)
};
}
exporterastandard Logga in;
Detta är ett enkelt inloggningsformulär. När en användare skickar in sitt användarnamn och lösenord kontrolleras de mot arrayen. Om dessa uppgifter är korrekta sätts det autentiserade tillståndet till Sann. Eftersom du kommer att kontrollera om användaren är autentiserad i Dashboard-komponenten, måste du också lagra autentiseringsstatusen någonstans som kan nås av andra komponenter. Den här artikeln använder lokal lagring. I en riktig applikation, med hjälp av Reagera sammanhang skulle vara ett bättre val.
Skapa en Dashboard-sida
Lägg till följande kod i en ny fil som heter Dashboard.js.
konst Instrumentpanel = () => {
lämna tillbaka (
<div>
<sid>Välkommen till din Dashboard</s>
</div>
);
};
exporterastandard Instrumentbräda;
Instrumentpanelen ska endast vara tillgänglig för autentiserade användare. Därför, när användare besöker instrumentpanelssidan, kontrollera först om de är autentiserade. Om de inte är det, omdirigera dem till inloggningssidan.
För att göra detta, ställ in applikationsvägarna först med hjälp av React-routern.
npm Installera reagera-router-dom
I index.js ställer du in routing för din applikation.
importera Reagera från "reagera";
importera ReactDOM från "reagera-dom/klient";
importera App från "./App";
importera { BrowserRouter, Route, Routes } från "reagera-router-dom";
importera Logga in från "./Logga in";
importera instrumentbräda från "./Instrumentbräda";
konst root = ReactDOM.createRoot(dokumentera.getElementById("root"));
rot.framställa(
<Reagera. StrictMode>
<BrowserRouter>
<Rutter>
<Ruttindexelement={<App />} />
<Vägväg="logga in" element={<Logga in />} />
<Vägväg="instrumentbräda" element={<Instrumentbräda />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Skydda Dashboard-sidan
Nu när dina applikationsvägar är inställda är nästa steg att gör instrumentbrädans rutt privat. När Dashboard-komponenten laddas hämtas autentiseringstillståndet från den lokala lagringen och lagras i tillståndet. Om användaren inte är autentiserad kommer applikationen att omdirigera till inloggningssidan annars kommer den att visa instrumentpanelssidan.
importera { useEffect, useState } från "reagera";
konst Instrumentpanel = () => {
konst [autenticated, setauthenticated] = useState(null);
useEffect(() => {
const logdInUser = localStorage.getItem("autentiserade");
if (loggedInUser) {
setautenticated (loggedInUser);
}
}, []);
if (!autenticated) {
// Omdirigera
} annan {
lämna tillbaka (
<div>
<sid>Välkommen till din Dashboard</s>
</div>
);
}
};
exporterastandard Instrumentbräda;
Omdirigera användaren till inloggningssidan med hjälp av Navigera
Navigate-komponenten ersatte Redirect-komponenten som användes i React Router v5. Importera Navigera från react-router-dom.
importera { Navigera } från "reagera-router-dom";
För att omdirigera oautentiserade användare, använd det enligt följande.
if (!autenticated) {
lämna tillbaka <Navigera ersätt till="/login" />;
} annan {
lämna tillbaka (
<div>
<sid>Välkommen till din Dashboard</s>
</div>
);
}
Navigate-komponenten är ett deklarativt API. Den förlitar sig på en användarhändelse, som i det här fallet är autentisering för att orsaka en tillståndsändring och följaktligen orsaka en omrendering av komponenten. Observera att du inte behöver använda sökordet ersätt. Att använda den ersätter den aktuella URL: en istället för att skicka den till webbläsarens historik.
Omdirigera användare till en annan sida med useNavigate()
Det andra alternativet för att utföra omdirigeringar i React är useNavigate() krok. Denna krok ger tillgång till navigeringsimperativ-API: et. Börja med att importera den från react-router-dom.
importera { useNavigate } från "reagera-router-dom";
Omdirigera när användaren har autentiserats i handleSubmit() fungerar så här:
konst navigera = useNavigate();
konst Logga in = () => {
konst navigera = useNavigate();
const [användarnamn, setusername] = useState("");
const [lösenord, setlösenord] = useState("");
konst [autenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("autentiserade") || falsk)
);
const användare = [{ användarnamn: "Jane", Lösenord: "testlösenord" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst account = users.find((användare) => användarnamn.användarnamn användarnamn);
om (konto && account.password lösenord) {
localStorage.setItem("autentiserade", Sann);
navigera("/dashboard");
}
};
lämna tillbaka (
<div>
<form onSubmit={handleSubmit}>
<inmatning
typ="text"
namn="Användarnamn"
värde={användarnamn}
onChange={(e) => setusername (e.target.value)}
/>
<inmatning
typ="Lösenord"
namn="Lösenord"
onChange={(e) => setpassword (e.target.value)}
/>
<ingångstyp="Skicka in" värde="Skicka in" />
</form>
</div>
);
};
I det här exemplet omdirigeras användaren till instrumentpanelen när användaren har skickat in formuläret med korrekta uppgifter.
När man skapar applikationer är ett av målen att ge användarna den bästa upplevelsen. Du kan göra detta genom att ta användaren tillbaka till sidan de var tidigare genom att omdirigera dem till inloggningssidan. Du kan göra detta genom att passera -1 för att navigera så här, navigera(-1). Det fungerar på samma sätt som att trycka på bakåtknappen i din webbläsare.
Routing i React
I den här artikeln lärde du dig hur du kan omdirigera en användare till en annan sida i React med både Navigera-komponenten och useNavigate() krok. Artikeln använde ett inloggningsformulär för att visa hur du kan omdirigera oautentiserade användare från en skyddad sida till inloggningssidan.