Meestal worden bij het bouwen van webapplicaties inlogpagina's gebruikt om privépagina's te beschermen. Voor een blogplatform is het dashboard bijvoorbeeld alleen toegankelijk voor geverifieerde gebruikers. Als een niet-geverifieerde gebruiker toegang probeert te krijgen tot die pagina, wordt deze door de toepassing omgeleid naar de inlogpagina. Zodra ze zijn ingelogd, krijgen ze toegang.
In dit artikel bekijken we hoe u een gebruiker kunt omleiden van een afgeschermde pagina naar een inlogpagina. We zullen ook bespreken hoe u de gebruiker terug kunt brengen naar de pagina waarop hij zich bevond na het inloggen.
In React Router v6 zijn er twee manieren waarop u een gebruiker kunt omleiden: de component Navigeren en de useNavigate() haak.
Een React-toepassing maken
Maak een eenvoudige React-toepassing met behulp van de maak-reageer-app opdracht. U gaat deze applicatie gebruiken om te testen hoe de component Navigeren en de useNavigate() haak werk.
npx creëren-reageren-app reageren-omleiden
Een inlogpagina maken
U moet een inlogpagina maken om gebruikers te authenticeren. Aangezien dit geen zelfstudie over authenticatie is, gebruikt u een array van objecten als de gebruikersdatabase.
Maak een nieuw bestand in de src map en noem maar op Inloggen.js. Voeg vervolgens de volgende code toe aan: maak het inlogformulier aan.
importeren { useState } van "Reageer";
importeren Dashboard van "./Dashboard";
const Inloggen = () => {
const [gebruikersnaam, setgebruikersnaam] = useState("");
const [wachtwoord, setpassword] = useState("");
const [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem ("authenticated")|| vals));
const gebruikers = [{ gebruikersnaam: "Jane", wachtwoord: "testwachtwoord" }];
const handvatSubmit = (e) => {
e.voorkom standaard()
const account = gebruikers.find((gebruiker) => gebruiker.gebruikersnaam gebruikersnaam);
als (account) && account.wachtwoord wachtwoord) {
geauthenticeerd(WAAR)
localStorage.setItem("geauthenticeerd", WAAR);
}
};
opbrengst (
<div>
<p>Welkom terug</p>
<formulier onSubmit={handleSubmit}>
<invoer
type="tekst"
naam="gebruikersnaam"
waarde={gebruikersnaam}
onChange={(e) => setgebruikersnaam (e.target.value)}
/>
<invoer
type="wachtwoord"
naam="Wachtwoord"
onChange={(e) => stel wachtwoord in (e.target.value)}
/>
<invoertype="indienen" waarde="Indienen" />
</form>
</div>
)
};
}
exporterenstandaard Log in;
Dit is een eenvoudig inlogformulier. Wanneer een gebruiker zijn gebruikersnaam en wachtwoord invoert, worden deze vergeleken met de array. Als deze gegevens correct zijn, is de geverifieerde status ingesteld op: WAAR. Aangezien u gaat controleren of de gebruiker is geauthenticeerd in de Dashboard-component, moet u de authenticatiestatus ook ergens opslaan waartoe andere componenten toegang hebben. Dit artikel maakt gebruik van lokale opslag. In een echte toepassing, met behulp van Reageer context zou een betere keuze zijn.
Een dashboardpagina maken
Voeg de volgende code toe aan een nieuw bestand met de naam Dashboard.js.
const Dashboard = () => {
opbrengst (
<div>
<p>Welkom op je Dashboard</p>
</div>
);
};
exporterenstandaard Dashboard;
Het dashboard mag alleen toegankelijk zijn voor geverifieerde gebruikers. Controleer daarom bij het bezoeken van de dashboardpagina eerst of ze geauthenticeerd zijn. Als dit niet het geval is, stuur ze dan door naar de inlogpagina.
Stel hiervoor eerst de applicatieroutes in met behulp van React router.
npm installeren react-router-dom
Stel in index.js de routering voor uw toepassing in.
importeren Reageer van "Reageer";
importeren ReactDOM van "reageer-dom/klant";
importeren App van "./App";
importeren { BrowserRouter, Route, Routes } van "reageren-router-dom";
importeren Log in van "./Log in";
importeren Dashboard van "./Dashboard";
const root = ReactDOM.createRoot(document.getElementById("root"));
wortel.veroorzaken(
<Reageer. Strikte modus>
<BrowserRouter>
<Routes>
<Route-indexelement={<App />} />
<Routepad="Log in" element={<Log in />} />
<Routepad="dashboard" element={<Dashboard />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Bescherm de dashboardpagina
Nu uw aanvraagroutes zijn ingesteld, is de volgende stap: maak de dashboardroute privé. Wanneer de Dashboard-component wordt geladen, wordt de authenticatiestatus opgehaald uit de lokale opslag en opgeslagen in de status. Als de gebruiker niet is geverifieerd, wordt de toepassing doorgestuurd naar de inlogpagina, anders wordt de dashboardpagina weergegeven.
importeren { useEffect, useState } van "Reageer";
const Dashboard = () => {
const [authenticated, setauthenticated] = useState(nul);
gebruikEffect(() => {
const ingelogdInUser = localStorage.getItem("geauthenticeerd");
if (loggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
if (!geverifieerd) {
// Redirect
} anders {
opbrengst (
<div>
<p>Welkom op je Dashboard</p>
</div>
);
}
};
exporterenstandaard Dashboard;
Gebruiker omleiden naar inlogpagina met behulp van Navigeren
De component Navigeren verving de component Redirect die werd gebruikt in React Router v5. Importeren Navigeer vanuit react-router-dom.
importeren { Navigeer } van "reageren-router-dom";
Gebruik het als volgt om niet-geverifieerde gebruikers om te leiden.
if (!geverifieerd) {
opbrengst <Navigeer vervangen naar="/login" />;
} anders {
opbrengst (
<div>
<p>Welkom op je Dashboard</p>
</div>
);
}
De component Navigeren is een declaratieve API. Het is gebaseerd op een gebruikersgebeurtenis, in dit geval authenticatie om een statuswijziging te veroorzaken en bijgevolg een component opnieuw te renderen. Houd er rekening mee dat u het zoekwoord vervangen niet hoeft te gebruiken. Het gebruik ervan vervangt de huidige URL in plaats van deze naar de geschiedenis van de browser te pushen.
Leid de gebruiker door naar een andere pagina met useNavigate()
De andere optie voor het uitvoeren van omleidingen in React is de useNavigate() haak. Deze hook geeft toegang tot de navigatie imperatieve API. Begin met het importeren van react-router-dom.
importeren { gebruikNavigeren } van "reageren-router-dom";
Omleiden zodra de gebruiker met succes is geverifieerd in de handvatSubmit() functioneren als volgt:
const navigeren = useNavigate();
const Inloggen = () => {
const navigeren = useNavigate();
const [gebruikersnaam, setgebruikersnaam] = useState("");
const [wachtwoord, setpassword] = useState("");
const [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("geauthenticeerd") || vals)
);
const gebruikers = [{ gebruikersnaam: "Jane", wachtwoord: "testwachtwoord" }];
const handvatSubmit = (e) => {
e.voorkom standaard();
const account = gebruikers.find((gebruiker) => gebruiker.gebruikersnaam gebruikersnaam);
als (account) && account.wachtwoord wachtwoord) {
localStorage.setItem("geauthenticeerd", WAAR);
navigeren("/dashboard");
}
};
opbrengst (
<div>
<formulier onSubmit={handleSubmit}>
<invoer
type="tekst"
naam="gebruikersnaam"
waarde={gebruikersnaam}
onChange={(e) => setgebruikersnaam (e.target.value)}
/>
<invoer
type="wachtwoord"
naam="Wachtwoord"
onChange={(e) => stel wachtwoord in (e.target.value)}
/>
<invoertype="indienen" waarde="Indienen" />
</form>
</div>
);
};
In dit voorbeeld wordt de gebruiker, zodra hij het formulier met de juiste gegevens indient, doorgestuurd naar het dashboard.
Bij het maken van applicaties is een van de doelen om de gebruikers de beste ervaring te bieden. U kunt dit doen door de gebruiker terug te brengen naar de pagina die hij eerder was door hem om te leiden naar de inlogpagina. U kunt dit doen door -1 door te geven om zo te navigeren, navigeren(-1). Het werkt op dezelfde manier als het indrukken van de terug-knop in uw browser.
Routering in React
In dit artikel heb je geleerd hoe je een gebruiker kunt omleiden naar een andere pagina in React met zowel de Navigate-component als de useNavigate() haak. Het artikel gebruikte een inlogformulier om te demonstreren hoe u niet-geverifieerde gebruikers van een beveiligde pagina naar de inlogpagina kunt omleiden.
