Vanligvis, når du bygger nettapplikasjoner, brukes påloggingssider for å beskytte private sider. For en bloggplattform kan det for eksempel hende at dashbordet bare er tilgjengelig for autentiserte brukere. Hvis en uautentisert bruker prøver å få tilgang til den siden, omdirigerer applikasjonen dem til påloggingssiden. Når de er pålogget, får de tilgang.

I denne artikkelen skal vi se på hvordan du kan omdirigere en bruker fra en begrenset side til en påloggingsside. Vi vil også diskutere hvordan du kan returnere brukeren tilbake til siden de var på etter pålogging.

I React Router v6 er det to måter du kan bruke for å omdirigere en bruker – Naviger-komponenten og useNavigate() krok.

Opprett en React-applikasjon

Lag en enkel React-applikasjon ved å bruke lag-reager-app kommando. Du vil bruke denne applikasjonen til å teste ut hvordan Naviger-komponenten og useNavigate() krok arbeid.

npx skape-react-app react-redirect

Opprett en påloggingsside

Du må opprette en påloggingsside for å autentisere brukere. Siden dette ikke er en autentiseringsveiledning, bruk en rekke objekter som brukerdatabase.

instagram viewer

Opprett en ny fil i src mappe og navngi den Login.js. Legg deretter til følgende kode, til opprette påloggingsskjemaet.

import { useState } fra "reagere";
import Dashbord fra "./Dashboard";
konst Logg inn = () => {
const [brukernavn, settbrukernavn] = brukState("");
const [passord, settpassord] = brukState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| falsk));
const brukere = [{ brukernavn: "Jane", passord: "testpassord" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst konto = brukere.finn((bruker) => bruker.brukernavn brukernavn);
hvis (konto && account.password passord) {
setautentisert(ekte)
localStorage.setItem("autentisert", sant);
}
};
komme tilbake (
<div>
<s>Velkommen tilbake</s>
<form onSubmit={handleSubmit}>
<input
type="tekst"
navn="Brukernavn"
verdi={brukernavn}
onChange={(e) => setusername (e.target.value)}
/>
<input
type="passord"
navn="Passord"
onChange={(e) => setpassword (e.target.value)}
/>
<input type="sende inn" verdi="Sende inn" />
</form>
</div>
)
};
}
eksportmisligholde Logg Inn;

Dette er et enkelt påloggingsskjema. Når en bruker sender inn brukernavn og passord, blir de sjekket mot matrisen. Hvis disse detaljene er korrekte, settes den autentiserte tilstanden til ekte. Siden du skal sjekke om brukeren er autentisert i Dashboard-komponenten, må du også lagre autentiseringsstatusen et sted som andre komponenter kan få tilgang til. Denne artikkelen bruker lokal lagring. I en ekte applikasjon, bruker Reager kontekst ville være et bedre valg.

Opprett en Dashboard-side

Legg til følgende kode i en ny fil kalt Dashboard.js.

konst Dashboard = () => {
komme tilbake (
<div>
<s>Velkommen til dashbordet ditt</s>
</div>
);
};
eksportmisligholde Dashbord;

Dashbordet skal kun være tilgjengelig for autentiserte brukere. Derfor, når brukere besøker dashbordsiden, må du først sjekke om de er autentisert. Hvis de ikke er det, omdirigere dem til påloggingssiden.

For å gjøre dette, konfigurer applikasjonsrutene først ved å bruke React-ruteren.

npm installere reager-ruter-dom

I index.js setter du opp rutingen for applikasjonen din.

import Reagere fra "reagere";
import ReactDOM fra "reager-dom/klient";
import App fra "./App";
import { BrowserRouter, Route, Routes } fra "reager-ruter-dom";
import Logg Inn fra "./Logg Inn";
import Dashbord fra "./Dashboard";
konst root = ReactDOM.createRoot(dokument.getElementById("root"));
rot.render(
<Reagere. StrictMode>
<Nettleserruter>
<Ruter>
<Ruteindekselement={<App />} />
<Rutebane="Logg Inn" element={<Logg Inn />} />
<Rutebane="dashbord" element={<Dashboard />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);

Beskytt Dashboard-siden

Nå som søknadsrutene dine er satt opp, er neste trinn å gjør dashbordruten privat. Når Dashboard-komponenten lastes, hentes autentiseringstilstanden fra den lokale lagringen og lagres i tilstanden. Hvis brukeren ikke er autentisert, vil applikasjonen omdirigere til påloggingssiden ellers vil den vise dashbordsiden.

import { useEffect, useState } fra "reagere";
konst Dashboard = () => {
konst [authenticated, setauthenticated] = useState(null);
useEffect(() => {
const loggedInUser = localStorage.getItem("autentisert");
if (loggedInUser) {
setautentisert (loggedInUser);
}
}, []);
if (!autentisert) {
// Omdirigere
} ellers {
komme tilbake (
<div>
<s>Velkommen til dashbordet ditt</s>
</div>
);
}
};
eksportmisligholde Dashbord;

Omdiriger brukeren til påloggingssiden ved å bruke Naviger

Navigate-komponenten erstattet Redirect-komponenten som ble brukt i React Router v5. Importer Naviger fra react-router-dom.

import { Naviger } fra "reager-ruter-dom";

For å omdirigere uautentiserte brukere, bruk det som følger.

if (!autentisert) {
komme tilbake <Naviger erstatte til="/login" />;
} ellers {
komme tilbake (
<div>
<s>Velkommen til dashbordet ditt</s>
</div>
);
}

Navigate-komponenten er en deklarativ API. Den er avhengig av en brukerhendelse, som i dette tilfellet er autentisering for å forårsake en tilstandsendring og følgelig forårsake en komponentgjengivelse. Vær oppmerksom på at du ikke trenger å bruke erstatt søkeordet. Bruk av den erstatter gjeldende URL i stedet for å skyve den til nettleserens historie.

Omdiriger brukeren til en annen side ved å bruke useNavigate()

Det andre alternativet for å utføre omdirigeringer i React er useNavigate() krok. Denne kroken gir tilgang til navigasjonsimperative API. Start med å importere den fra react-router-dom.

import { useNavigate } fra "reager-ruter-dom";

Omdiriger når brukeren er autentisert i handleSubmit() fungerer slik:

konst navigate = useNavigate();
konst Logg inn = () => {
konst navigate = useNavigate();
const [brukernavn, settbrukernavn] = brukState("");
const [passord, settpassord] = brukState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("autentisert") || falsk)
);
const brukere = [{ brukernavn: "Jane", passord: "testpassord" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst konto = brukere.finn((bruker) => bruker.brukernavn brukernavn);
hvis (konto && account.password passord) {
localStorage.setItem("autentisert", sant);
navigere("/dashboard");
}
};
komme tilbake (
<div>
<form onSubmit={handleSubmit}>
<input
type="tekst"
navn="Brukernavn"
verdi={brukernavn}
onChange={(e) => setusername (e.target.value)}
/>
<input
type="passord"
navn="Passord"
onChange={(e) => setpassword (e.target.value)}
/>
<input type="sende inn" verdi="Sende inn" />
</form>
</div>
);
};

I dette eksemplet, når brukeren har sendt inn skjemaet med de riktige detaljene, blir de omdirigert til dashbordet.

Når du lager applikasjoner, er et av målene å gi brukerne den beste opplevelsen. Du kan gjøre dette ved å ta brukeren tilbake til siden de var før ved å omdirigere dem til påloggingssiden. Du kan gjøre dette ved å sende -1 for å navigere slik, naviger(-1). Det fungerer på samme måte som å trykke på tilbake-knappen på nettleseren din.

Ruting i React

I denne artikkelen lærte du hvordan du kan omdirigere en bruker til en annen side i React ved å bruke både Naviger-komponenten og useNavigate() krok. Artikkelen brukte et påloggingsskjema for å demonstrere hvordan du kan omdirigere uautentiserte brukere fra en beskyttet side til påloggingssiden.