Rutele protejate sunt acele rute care acordă acces numai utilizatorilor autorizați. Aceasta înseamnă că utilizatorii trebuie să îndeplinească mai întâi anumite condiții înainte de a accesa acel traseu specific. De exemplu, aplicația dvs. poate solicita doar utilizatorilor conectați să poată vizita pagina tabloului de bord.

În acest tutorial, veți învăța cum creați rute protejate într-o aplicație React.

Rețineți că veți folosi React Router v6, care este puțin diferit de versiunile anterioare.

Noțiuni de bază

Pentru a începe, utilizați create-react-app pentru a porni o aplicație simplă React.

npx create-react-app protect-routes-react

Navigați la folderul care tocmai a fost creat și porniți aplicația.

cd protect-routes-react
npm start

Deschideți folderul aplicației cu editorul de text preferat și curățați-l. Ta app.js ar trebui să arate așa.

function App() {
 întoarcere ;
}
exportați aplicația implicită;

Acum sunteți gata să configurați rutele.

Legate de: Cum să creezi prima ta aplicație React cu JavaScript

Configurarea routerului React

Veți folosi React Router pentru a configura navigarea pentru aplicația dvs.

Instalare reacţionează-router-dom.

npm instalează react-router-dom

Pentru această aplicație, veți avea trei pagini principale:

• Pagina de pornire (pagina de destinație).
• Pagina de profil (protejată, deci numai utilizatorii autentificați au acces).
• Pagina Despre (publică, astfel încât oricine să o poată accesa).

În Navbar.js, folosește Legătură componenta din reacţionează-router-dom pentru a crea legături de navigare către diferite căi.

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

 );
};
export implicit Navbar;

În app.js creați rutele care se potrivesc cu legăturile din meniul de navigare.

import { BrowserRouter as Router, Routes, Route } din „react-router-dom”;
importați Navbar din „./Navbar”;
import Home din „./Home”;
import Profil din „./Profile”;
import Despre din „./Despre”;
function App() {
 întoarcere (



} />
} />
} />


 );
}
exportați aplicația implicită;

Acum trebuie să creați componentele în care ați făcut referire App.js.

În Acasă.js:

const Acasă = () => {
 întoarcere 
pagina principala
;
};
export implicit Home;

În Profile.js

const Profil = () => {
 întoarcere 
Pagina de profil
;
};
export implicit Profil;

În Despre.js

const Despre = () => {
 întoarcere 
Despre pagina
;
};
export implicit Despre;

Crearea rutelor protejate în React

Următorul este crearea rutelor protejate. The Acasă și despre rutele sunt publice, ceea ce înseamnă că oricine le poate accesa, dar ruta de profil necesită ca utilizatorii să fie mai întâi autentificați. Prin urmare, trebuie să creați o modalitate de a vă conecta utilizatorii.

Configurarea autentificării false

Deoarece acesta nu este un tutorial de autentificare, veți folosi React useState hook pentru a simula un sistem de conectare.

În App.js, adăugați următoarele.

import { Routes, Route, BrowserRouter } din "react-router-dom";
import { useState } din „react”;
// Alte state de import
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (adevărat);
 };
 const logout = () => {
 setisLoggedIn (fals);
 };
 întoarcere (


 {este conectat? (
Deconectare
 ): (
Autentificare
 )}



 );
}
exportați aplicația implicită;

Aici, urmăriți starea de conectare a utilizatorului care utilizează starea. Aveți două butoane, butonul de conectare și butonul de deconectare. Aceste butoane sunt redate pe rând, în funcție de dacă un utilizator este conectat sau nu.

Dacă utilizatorul este deconectat, este afișat butonul de conectare. Făcând clic pe acesta, va declanșa funcția de autentificare care va actualiza esteLoggedIn starea la adevărat și, la rândul său, se afișează de la conectare la butonul de deconectare.

Legate de: Ce este autentificarea utilizatorului și cum funcționează?

Protejarea componentelor private

Pentru a proteja rutele, componentele private trebuie să aibă și acces la esteLoggedIn valoare. Puteți face acest lucru prin crearea unei noi componente care acceptă esteLoggedIn statul ca recuzită și componenta privată ca copil.

De exemplu, dacă noua ta componentă este numită „Protected”, vei reda o componentă privată ca aceasta.

Componenta protejată va verifica dacă esteLoggedIn este adevărat sau fals. Dacă este adevărat, va merge înainte și va returna componenta Private. Dacă este fals, acesta va redirecționa utilizatorul către o pagină unde se poate conecta.

Aflați mai multe despre alte moduri pe care le puteți utiliza pentru a reda o componentă în funcție de condiții din acest articol redare condiționată în React.

În aplicația dvs., creați Protected.js.

import { Navigate } din "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
 dacă (! isLoggedIn) {
 întoarcere ;
 }
 întoarcerea copiilor;
};
export implicit Protejat;

În această componentă, instrucțiunea if este utilizată pentru a verifica dacă utilizatorul este autentificat. Dacă nu sunt, Navigați din reacţionează-router-dom le redirecționează către pagina de pornire. Cu toate acestea, dacă utilizatorul este autentificat, componenta copil este redată.

Utilizare Protected.js în App.js modifica Profil traseul paginii.

 path="/profile"
 element={



 }
/>

App.js ar trebui să arate așa.

import { Routes, Route, BrowserRouter } din "react-router-dom";
import { useState } din „react”;
importați Navbar din „./Navbar”;
import Protejat de „./Protected”;
import Home din „./Home”;
import Despre din „./Despre”;
import Profil din „./Profile”;
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (adevărat);
 };
 const logout = () => {
 setisLoggedIn (fals);
 };
 întoarcere (




 {este conectat? (
Deconectare
 ): (
Autentificare
 )}

} />
 element={



 }
 />
} />





 );
}
exportați aplicația implicită;

Asta este despre crearea rutelor protejate. Acum puteți accesa pagina de profil numai dacă sunteți autentificat. Dacă încercați să navigați la pagina de profil fără a vă autentifica, veți fi redirecționat către pagina de pornire.

Controlul accesului bazat pe roluri

Acest tutorial v-a arătat cum puteți restricționa accesul utilizatorilor neautentificați la o pagină dintr-o aplicație React. În unele cazuri, ar putea fi necesar să mergeți și mai departe și să restricționați utilizatorii în funcție de rolurile lor. De exemplu, puteți avea o pagină să spună o pagină de analiză care acordă acces doar administratorilor. Aici, va trebui să adăugați o logică în componenta Protected care verifică dacă un utilizator îndeplinește condițiile necesare.

Cum să implementați randarea condiționată în React.js (cu exemple)

Redarea condiționată este o modalitate utilă de a vă îmbunătăți aplicația. Iată o selecție de modalități de utilizare.

Citiți în continuare

Despre autor