Beskyttede ruter er de rutene som kun gir tilgang til autoriserte brukere. Dette betyr at brukere først må oppfylle visse betingelser før de får tilgang til den spesifikke ruten. For eksempel kan applikasjonen din kreve at bare påloggede brukere kan besøke dashbordsiden.

I denne opplæringen skal du lære hvordan du lager beskyttede ruter i en React-applikasjon.

Merk at du skal bruke React Router v6, som er litt forskjellig fra tidligere versjoner.

Starter

For å komme i gang, bruk lag-reager-app å starte opp en enkel React-applikasjon.

npx create-react-app protect-routes-react

Naviger til mappen som nettopp ble opprettet og start programmet.

cd beskytte-ruter-reagere
npm start

Åpne applikasjonsmappen med din foretrukne tekstredigerer og ryd opp i den. Din app.js skal se slik ut.

funksjon App() {
 komme tilbake ;
}
eksport standard app;

Du er nå klar til å sette opp rutene.

I slekt: Hvordan lage din første reaksjonsapp med JavaScript

Sette opp React-ruteren

Du vil bruke React Router til å sette opp navigasjonen for applikasjonen din.

Installere reagere-ruter-dom.

npm installer react-router-dom

For denne applikasjonen vil du ha tre hovedsider:

• Hjemmeside (landingssiden).
• Profilside (beskyttet, så kun innloggede brukere har tilgang).
• Om-siden (offentlig slik at alle kan få tilgang til den).

I Navbar.js, bruke Link komponent fra reagere-ruter-dom for å lage navigasjonslenker til ulike stier.

const { Link } = require("react-router-dom");
const Navbar = () => {
 komme tilbake (

 );
};
eksport standard Navbar;

I app.js lag rutene som samsvarer med lenkene i navigasjonsmenyen.

importer { BrowserRouter som ruter, ruter, rute } fra "react-router-dom";
importer Navbar fra "./Navbar";
importer Hjem fra "./Hjem";
importer profil fra "./Profil";
importer Om fra "./Om";
funksjon App() {
 komme tilbake (



} />
} />
} />


 );
}
eksport standard app;

Nå må du lage komponentene du har referert til ENpp.js.

I Home.js:

const Hjem = () => {
 komme tilbake 
Hjemmeside
;
};
eksport standard Hjem;

I Profile.js

const Profil = () => {
 komme tilbake 
Profilside
;
};
eksporter standardprofil;

I About.js

const Om = () => {
 komme tilbake 
Om side
;
};
eksport standard Om;

Opprette beskyttede ruter i React

Neste opp er å lage beskyttede ruter. De hjem og Om ruter er offentlige, noe som betyr at alle kan få tilgang til dem, men profilruten krever at brukere blir autentisert først. Derfor må du lage en måte å logge inn brukere på.

Sette opp falsk autentisering

Siden dette ikke er en autentiseringsopplæring, vil du bruke React useState krok å simulere et påloggingssystem.

I ENpp.js, legg til følgende.

importer { Routes, Route, BrowserRouter } fra "react-router-dom";
importer { useState } fra "react";
// Andre importstempler
funksjon App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const utlogging = () => {
 setisLoggedIn (false);
 };
 komme tilbake (


 {er pålogget? (
Logg ut
 ): (
Logg Inn
 )}



 );
}
eksport standard app;

Her sporer du påloggingsstatusen til brukeren som bruker tilstand. Du har to knapper, påloggings- og utloggingsknappen. Disse knappene gjengis etter tur avhengig av om en bruker er pålogget eller ikke.

Hvis brukeren er logget ut, vises påloggingsknappen. Ved å klikke på den vil påloggingsfunksjonen utløses som oppdaterer er pålogget tilstand til sann og i sin tur visningen fra pålogging til utloggingsknappen.

I slekt: Hva er brukerautentisering og hvordan fungerer det?

Beskyttelse av private komponenter

For å beskytte ruter må de private komponentene også ha tilgang til er pålogget verdi. Du kan gjøre dette ved å opprette en ny komponent som godtar er pålogget stat som rekvisitt og den private komponenten som barn.

For eksempel, hvis den nye komponenten din heter "Beskyttet", vil du gjengi en privat komponent som dette.

Den beskyttede komponenten vil sjekke om er pålogget er sant eller usant. Hvis det er sant, vil det gå videre og returnere den private komponenten. Hvis det er usant, vil det omdirigere brukeren til en side hvor de kan logge på.

Lær mer om andre måter du kan bruke for å gjengi en komponent avhengig av forholdene fra denne artikkelen og videre betinget gjengivelse i React.

Opprett i søknaden din Protected.js.

import { Naviger } fra "react-router-dom";
const Protected = ({ er pålogget, barn }) => {
 if (!er pålogget) {
 komme tilbake ;
 }
 returnere barn;
};
eksport standard Beskyttet;

I denne komponenten brukes if-setningen til å sjekke om brukeren er autentisert. Hvis de ikke er det, Navigere fra reagere-ruter-dom omdirigerer dem til hjemmesiden. Men hvis brukeren er autentisert, blir den underordnede komponenten gjengitt.

Bruk Protected.js i ENpp.js endre Profil side rute.

 path="/profile"
 element={



 }
/>

App.js skal se slik ut.

importer { Routes, Route, BrowserRouter } fra "react-router-dom";
importer { useState } fra "react";
importer Navbar fra "./Navbar";
import Beskyttet fra "./Protected";
importer Hjem fra "./Hjem";
importer Om fra "./Om";
importer profil fra "./Profil";
funksjon App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const utlogging = () => {
 setisLoggedIn (false);
 };
 komme tilbake (




 {er pålogget? (
Logg ut
 ): (
Logg Inn
 )}

} />
 element={



 }
 />
} />





 );
}
eksport standard app;

Det handler om å lage beskyttede ruter. Du kan nå bare få tilgang til profilsiden hvis du er pålogget. Hvis du prøver å navigere til profilsiden uten å logge deg på, blir du omdirigert til hjemmesiden.

Rollebasert tilgangskontroll

Denne opplæringen viste deg hvordan du kan begrense uautentiserte brukere fra å få tilgang til en side i en React-applikasjon. I noen tilfeller må du kanskje gå enda lenger og begrense brukere basert på rollene deres. For eksempel kan du la en side si en analyseside som bare gir tilgang til administratorer. Her må du legge til logikk i den beskyttede komponenten som sjekker om en bruker oppfyller de nødvendige betingelsene.

Hvordan implementere betinget gjengivelse i React.js (med eksempler)

Betinget gjengivelse er en nyttig måte å forbedre appen din på. Her er et utvalg måter å bruke det på.

Les Neste

Om forfatteren