Beskyttede ruter er de ruter, der kun giver adgang til autoriserede brugere. Det betyder, at brugere først skal opfylde visse betingelser, før de får adgang til den specifikke rute. For eksempel kan din applikation kræve, at kun loggede brugere kan besøge dashboard-siden.

I denne vejledning skal du lære, hvordan du opretter beskyttede ruter i en React-applikation.

Bemærk, at du vil bruge React Router v6, som er en smule anderledes end tidligere versioner.

Kom godt i gang

For at komme i gang, brug opret-reager-app at bootstrap en simpel React-applikation.

npx create-react-app protect-routes-react

Naviger til den mappe, der lige blev oprettet, og start din applikation.

cd beskytte-ruter-reagere
npm start

Åbn din applikationsmappe med din foretrukne teksteditor, og ryd op i den. Dit app.js skal se sådan ud.

funktion App() {
 Vend tilbage ;
}
eksport standard app;

Du er nu klar til at sætte ruterne op.

Relaterede: Sådan opretter du din første React-app med JavaScript

Opsætning af React Router

Du skal bruge React Router til at konfigurere navigationen til din applikation.

Installere reagere-router-dom.

npm installer react-router-dom

Til denne ansøgning har du tre hovedsider:

• Hjemmeside (landingssiden).
• Profilside (beskyttet, så kun loggede brugere har adgang).
• Om-siden (offentlig, så alle kan få adgang til den).

I Navbar.js, brug Link komponent fra reagere-router-dom at oprette navigationslinks til forskellige stier.

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

 );
};
eksport standard Navbar;

I app.js oprette de ruter, der matcher links i navigationsmenuen.

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



} />
} />
} />


 );
}
eksport standard app;

Nu skal du oprette de komponenter, du har refereret til ENpp.js.

I Home.js:

const Hjem = () => {
 Vend tilbage 
Hjemmeside
;
};
eksport standard Hjem;

I Profile.js

const Profil = () => {
 Vend tilbage 
Profilside
;
};
eksport standardprofil;

I About.js

const Om = () => {
 Vend tilbage 
Om side
;
};
eksport standard Om;

Oprettelse af beskyttede ruter i React

Det næste er at oprette beskyttede ruter. Det hjem og om ruter er offentlige, hvilket betyder, at alle kan få adgang til dem, men profilruten kræver, at brugere bliver godkendt først. Derfor skal du oprette en måde at logge brugere på.

Opsætning af falsk godkendelse

Da dette ikke er en godkendelsesvejledning, vil du bruge React useState krog at simulere et login-system.

I ENpp.js, tilføje følgende.

importer { Routes, Route, BrowserRouter } fra "react-router-dom";
importer { useState } fra "react";
// Andre importstempler
funktion App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const login = () => {
 setisLoggedIn (sandt);
 };
 const logOut = () => {
 setisLoggedIn (falsk);
 };
 Vend tilbage (


 {er logget på? (
Log ud
 ): (
Log på
 )}



 );
}
eksport standard app;

Her sporer du login-status for brugeren, der bruger tilstand. Du har to knapper, login og logout-knappen. Disse knapper gengives efter tur afhængigt af, om en bruger er logget ind eller ej.

Hvis brugeren er logget ud, vises login-knappen. Ved at klikke på den udløses login-funktionen, som opdaterer er logget på tilstand til sand og igen visningen fra login til logout-knappen.

Relaterede: Hvad er brugergodkendelse, og hvordan fungerer det?

Beskyttelse af private komponenter

For at beskytte ruter skal de private komponenter også have adgang til er logget på værdi. Du kan gøre dette ved at oprette en ny komponent, der accepterer er logget på stat som rekvisit og den private komponent som barn.

For eksempel, hvis din nye komponent hedder "Beskyttet", ville du gengive en privat komponent som denne.

Den beskyttede komponent vil kontrollere, om er logget på er sandt eller falsk. Hvis det er sandt, vil det gå videre og returnere den private komponent. Hvis det er falsk, vil det omdirigere brugeren til en side, hvor de kan logge ind.

Lær mere om andre måder, du kan bruge til at gengive en komponent, afhængigt af betingelser fra denne artikel og videre betinget gengivelse i React.

I din ansøgning skal du oprette Protected.js.

importer { Naviger } fra "react-router-dom";
const beskyttet = ({ er logget på, børn }) => {
 if (!er logget på) {
 Vend tilbage ;
 }
 returnere børn;
};
eksport standard Beskyttet;

I denne komponent bruges if-sætningen til at kontrollere, om brugeren er autentificeret. Hvis de ikke er, Navigere fra reagere-router-dom omdirigerer dem til startsiden. Men hvis brugeren er godkendt, gengives den underordnede komponent.

Brug Protected.js i ENpp.js ændre Profil side rute.

 path="/profile"
 element={



 }
/>

App.js skal se sådan ud.

importer { Routes, Route, BrowserRouter } fra "react-router-dom";
importer { useState } fra "react";
importer Navbar fra "./Navbar";
import Beskyttet mod "./Protected";
importer Hjem fra "./Hjem";
importer Om fra "./Om";
importer profil fra "./Profil";
funktion App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const login = () => {
 setisLoggedIn (sandt);
 };
 const logOut = () => {
 setisLoggedIn (falsk);
 };
 Vend tilbage (




 {er logget på? (
Log ud
 ): (
Log på
 )}

} />
 element={



 }
 />
} />





 );
}
eksport standard app;

Det handler om at skabe beskyttede ruter. Du kan nu kun få adgang til profilsiden, hvis du er logget ind. Hvis du forsøger at navigere til profilsiden uden at logge på, bliver du omdirigeret til startsiden.

Rollebaseret adgangskontrol

Denne vejledning viste dig, hvordan du kan begrænse uautoriserede brugere i at få adgang til en side i en React-applikation. I nogle tilfælde skal du muligvis gå endnu længere og begrænse brugere baseret på deres roller. For eksempel kan du få en side til at sige en analyseside, der kun giver adgang til administratorer. Her skal du tilføje logik i den beskyttede komponent, der kontrollerer, om en bruger opfylder de påkrævede betingelser.

Sådan implementeres betinget rendering i React.js (med eksempler)

Betinget gengivelse er en nyttig måde at forbedre din app på. Her er et udvalg af måder at bruge det på.

Læs Næste

Om forfatteren