Skyddade rutter är de rutter som endast ger åtkomst till behöriga användare. Detta innebär att användare först måste uppfylla vissa villkor innan de får åtkomst till den specifika rutten. Till exempel kan din applikation kräva att endast inloggade användare kan besöka instrumentpanelssidan.

I den här handledningen kommer du att lära dig hur du skapar skyddade rutter i en React-applikation.

Observera att du kommer att använda React Router v6, som skiljer sig lite från tidigare versioner.

Komma igång

För att komma igång, använd skapa-reagera-app för att starta upp en enkel React-applikation.

npx create-react-app protect-routes-react

Navigera till mappen som just skapades och starta din applikation.

cd skydda-rutter-reagera
npm start

Öppna din applikationsmapp med din föredragna textredigerare och rensa upp den. Din app.js ska se ut så här.

function App() {
 lämna tillbaka ;
}
exportera standardapp;

Du är nu redo att ställa in rutterna.

Relaterad: Hur du skapar din första React-app med JavaScript

Konfigurera React Router

Du kommer att använda React Router för att ställa in navigeringen för din applikation.

Installera reagera-router-dom.

npm installera react-router-dom

För den här applikationen har du tre huvudsidor:

• Hemsida (målsidan).
• Profilsida (skyddad, så endast inloggade användare har tillgång).
• Om sidan (offentlig så att alla kan komma åt den).

I Navbar.js, Använd Länk komponent från reagera-router-dom för att skapa navigeringslänkar till olika vägar.

const { Link } = require("react-router-dom");
const Navbar = () => {
 lämna tillbaka (

 );
};
export standard navigeringsfält;

I app.js skapa de rutter som matchar länkarna i navigeringsmenyn.

importera { BrowserRouter som router, rutter, rutt } från "react-router-dom";
importera Navbar från "./Navbar";
importera hem från "./Home";
importera profil från "./Profile";
importera Om från "./About";
function App() {
 lämna tillbaka (



} />
} />
} />


 );
}
exportera standardapp;

Nu måste du skapa komponenterna du har refererat till App.js.

I Home.js:

const Hem = () => {
 lämna tillbaka 
Hemsida
;
};
export standard Hem;

I Profile.js

const Profil = () => {
 lämna tillbaka 
Profilsida
;
};
exportera standardprofil;

I About.js

const About = () => {
 lämna tillbaka 
Om sidan
;
};
export standard Om;

Skapa skyddade rutter i React

Nästa steg är att skapa skyddade rutter. De Hem och handla om rutter är offentliga vilket betyder att alla kan komma åt dem, men profilrutten kräver att användarna autentiseras först. Därför måste du skapa ett sätt att logga in användare.

Konfigurera falsk autentisering

Eftersom detta inte är en autentiseringshandledning kommer du att använda React useState krok att simulera ett inloggningssystem.

I App.js, lägg till följande.

importera { Routes, Route, BrowserRouter } från "react-router-dom";
importera { useState } från "react";
// Andra importstämpel
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const logga ut = () => {
 setisLoggedIn (falskt);
 };
 lämna tillbaka (


 {är inloggad? (
Logga ut
 ): (
Logga in
 )}



 );
}
exportera standardapp;

Här spårar du inloggningsstatusen för användaren som använder tillstånd. Du har två knappar, logga in och utloggningsknappen. Dessa knappar återges i tur och ordning beroende på om en användare är inloggad eller inte.

Om användaren är utloggad visas inloggningsknappen. Om du klickar på den aktiveras inloggningsfunktionen som uppdaterar är inloggad status till sant och i sin tur visningen från inloggning till utloggningsknappen.

Relaterad: Vad är användarautentisering och hur fungerar det?

Skydda privata komponenter

För att skydda rutter måste de privata komponenterna också ha tillgång till är inloggad värde. Du kan göra detta genom att skapa en ny komponent som accepterar är inloggad staten som rekvisita och den privata komponenten som barn.

Till exempel, om din nya komponent heter "Protected", skulle du rendera en privat komponent så här.

Den skyddade komponenten kommer att kontrollera om är inloggad är sant eller falskt. Om det är sant kommer det att gå vidare och returnera den privata komponenten. Om det är falskt kommer det att omdirigera användaren till en sida där de kan logga in.

Läs mer om andra sätt du kan använda för att rendera en komponent beroende på förhållandena från och med den här artikeln villkorlig återgivning i React.

Skapa i din ansökan Protected.js.

importera { Navigera } från "react-router-dom";
const Protected = ({ isLoggedIn, barn }) => {
 if (!är inloggad) {
 lämna tillbaka ;
 }
 återlämna barn;
};
export standard Skyddad;

I den här komponenten används if-satsen för att kontrollera om användaren är autentiserad. Om de inte är det, Navigera från reagera-router-dom omdirigerar dem till startsidan. Men om användaren är autentiserad renderas den underordnade komponenten.

Använda sig av Protected.js i App.js ändra Profil sida rutt.

 path="/profile"
 element={



 }
/>

App.js ska se ut så här.

importera { Routes, Route, BrowserRouter } från "react-router-dom";
importera { useState } från "react";
importera Navbar från "./Navbar";
import Skyddad från "./Protected";
importera hem från "./Home";
importera Om från "./About";
importera profil från "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const logga ut = () => {
 setisLoggedIn (falskt);
 };
 lämna tillbaka (




 {är inloggad? (
Logga ut
 ): (
Logga in
 )}

} />
 element={



 }
 />
} />





 );
}
exportera standardapp;

Det handlar om att skapa skyddade rutter. Du kan nu bara komma åt profilsidan om du är inloggad. Om du försöker navigera till profilsidan utan att logga in kommer du att omdirigeras till startsidan.

Rollbaserad åtkomstkontroll

Den här handledningen visade hur du kan begränsa oautentiserade användare från att komma åt en sida i en React-applikation. I vissa fall kan du behöva gå ännu längre och begränsa användare baserat på deras roller. Till exempel kan du låta en sida säga en analyssida som bara ger åtkomst till administratörer. Här måste du lägga till logik i den skyddade komponenten som kontrollerar om en användare uppfyller kraven.

Hur man implementerar villkorlig rendering i React.js (med exempel)

Villkorlig rendering är ett användbart sätt att förbättra din app. Här är ett urval av sätt att använda den.

Läs Nästa

Om författaren