Beveiligde routes zijn die routes die alleen toegang verlenen aan geautoriseerde gebruikers. Dit betekent dat gebruikers eerst aan bepaalde voorwaarden moeten voldoen voordat ze die specifieke route kunnen betreden. Uw toepassing kan bijvoorbeeld vereisen dat alleen ingelogde gebruikers de dashboardpagina kunnen bezoeken.

In deze tutorial leer je hoe je beveiligde routes maakt in een React-toepassing.

Merk op dat je React Router v6 gaat gebruiken, wat een beetje anders is dan eerdere versies.

Aan de slag

Gebruik om te beginnen maak-reageer-app om een ​​eenvoudige React-toepassing op te starten.

npx maken-reageren-app beschermen-routes-reageren

Navigeer naar de map die zojuist is gemaakt en start uw toepassing.

cd beschermen-routes-reageren
npm start

Open uw applicatiemap met uw favoriete teksteditor en ruim deze op. Uw app.js zou er zo uit moeten zien.

functie App() {
 opbrengst ;
}
export standaard app;

U bent nu klaar om de routes in te stellen.

Verwant: Hoe u uw eerste React-app met JavaScript kunt maken

De React-router instellen

Je gebruikt React Router om de navigatie voor je applicatie in te stellen.

Installeren reageren-router-dom.

npm install react-router-dom

Voor deze toepassing heeft u drie hoofdpagina's:

• Startpagina (de landingspagina).
• Profielpagina (beveiligd, dus alleen ingelogde gebruikers hebben toegang).
• Over-pagina (openbaar zodat iedereen er toegang toe heeft).

In Navbar.js, gebruik de Koppeling onderdeel van reageren-router-dom om de navigatielinks naar verschillende paden te maken.

const { Link } = required("react-router-dom");
const Navigatiebalk = () => {
 opbrengst (

 );
};
standaard navigatiebalk exporteren;

In app.js maak de routes die overeenkomen met de links in het navigatiemenu.

importeer { BrowserRouter als Router, Routes, Route } van "react-router-dom";
importeer Navbar van "./Navbar";
importeer Home van "./Home";
importeer Profiel van "./Profiel";
import Over van "./Over";
functie App() {
 opbrengst (



} />
} />
} />


 );
}
export standaard app;

Nu moet je de componenten maken waarnaar je hebt verwezen in EENpp.js.

In Home.js:

const Thuis = () => {
 opbrengst 
Startpagina
;
};
export standaard Home;

In Profile.js

const Profiel = () => {
 opbrengst 
Profiel pagina
;
};
standaardprofiel exporteren;

In Over.js

const Over = () => {
 opbrengst 
Over pagina
;
};
export standaard Over;

Beveiligde routes maken in React

De volgende stap is het creëren van beveiligde routes. De thuis en over routes zijn openbaar, wat betekent dat iedereen er toegang toe heeft, maar de profielroute vereist dat gebruikers eerst worden geverifieerd. Daarom moet u een manier maken om gebruikers aan te melden.

Valse authenticatie instellen

Aangezien dit geen authenticatie-tutorial is, gebruikt u React useState hook om een ​​inlogsysteem te simuleren.

In EENpp.js, voeg het volgende toe.

importeer {Routes, Route, BrowserRouter} van "react-router-dom";
importeer { useState } van "reageren";
// Overige invoerrechten
functie App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const inloggen = () => {
 setisLoggedIn (waar);
 };
 const uitloggen = () => {
 setisLoggedIn (false);
 };
 opbrengst (


 {isIngelogd? (
Uitloggen
 ): (
Log in
 )}



 );
}
export standaard app;

Hier volgt u de inlogstatus van de gebruiker met behulp van state. Je hebt twee knoppen, de login en de logout-knop. Deze knoppen worden op hun beurt weergegeven, afhankelijk van of een gebruiker is ingelogd of niet.

Als de gebruiker is uitgelogd, wordt de login-knop weergegeven. Als u erop klikt, wordt de inlogfunctie geactiveerd die de is ingelogd state naar true en op zijn beurt de weergave van login naar de logout-knop.

Verwant: Wat is gebruikersauthenticatie en hoe werkt het?

Privécomponenten beschermen

Om routes te beschermen, moeten de privécomponenten ook toegang hebben tot de is ingelogd waarde. U kunt dit doen door een nieuwe component te maken die de. accepteert is ingelogd staat als een rekwisiet en de privécomponent als een kind.

Als uw nieuwe component bijvoorbeeld de naam "Beveiligd" heeft, zou u een privécomponent zoals deze weergeven.

De beveiligde component zal controleren of: is ingelogd waar of onwaar is. Als het waar is, gaat het door en retourneert het de privé-component. Als het onwaar is, wordt de gebruiker omgeleid naar een pagina waar hij kan inloggen.

In dit artikel vindt u meer informatie over andere manieren waarop u een component kunt renderen, afhankelijk van de voorwaarden voorwaardelijke weergave in React.

Maak in uw toepassing Protected.js.

importeer { Navigeer } van "react-router-dom";
const Beschermd = ({ isLoggedIn, kinderen }) => {
 if (!isLoggedIn) {
 opbrengst ;
 }
 terugkerende kinderen;
};
standaard exporteren Beveiligd;

In deze component wordt het if-statement gebruikt om te controleren of de gebruiker is geauthenticeerd. Als ze dat niet zijn, Navigeren van reageren-router-dom leidt ze door naar de startpagina. Als de gebruiker echter is geverifieerd, wordt de onderliggende component weergegeven.

Gebruiken Protected.js in EENpp.js wijzig de Profiel pagina route.

 path="/profiel"
 element={



 }
/>

App.js zou er zo uit moeten zien.

importeer {Routes, Route, BrowserRouter} van "react-router-dom";
importeer { useState } van "reageren";
importeer Navbar van "./Navbar";
import Beschermd tegen "./Protected";
importeer Home van "./Home";
import Over van "./Over";
importeer Profiel van "./Profiel";
functie App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const inloggen = () => {
 setisLoggedIn (waar);
 };
 const uitloggen = () => {
 setisLoggedIn (false);
 };
 opbrengst (




 {isIngelogd? (
Uitloggen
 ): (
Log in
 )}

} />
 element={



 }
 />
} />





 );
}
export standaard app;

Dat is het over het maken van beveiligde routes. Je hebt nu alleen toegang tot de profielpagina als je bent ingelogd. Als u naar de profielpagina probeert te navigeren zonder in te loggen, wordt u doorgestuurd naar de startpagina.

Op rollen gebaseerde toegangscontrole

Deze tutorial liet je zien hoe je kunt voorkomen dat niet-geverifieerde gebruikers toegang krijgen tot een pagina in een React-applicatie. In sommige gevallen moet u mogelijk nog verder gaan en gebruikers beperken op basis van hun rollen. U kunt bijvoorbeeld een pagina een analysepagina laten noemen die alleen toegang verleent aan beheerders. Hier moet je in het onderdeel Protected logica toevoegen die controleert of een gebruiker aan de vereiste voorwaarden voldoet.

Voorwaardelijke weergave implementeren in React.js (met voorbeelden)

Voorwaardelijke weergave is een handige manier om uw app te verbeteren. Hier is een selectie van manieren om het te gebruiken.

Lees volgende

Over de auteur