Aizsargātie maršruti ir tie maršruti, kas nodrošina piekļuvi tikai pilnvarotiem lietotājiem. Tas nozīmē, ka, lai piekļūtu konkrētajam maršrutam, lietotājiem vispirms ir jāizpilda noteikti nosacījumi. Piemēram, jūsu lietojumprogramma var pieprasīt, lai tikai pieteikušies lietotāji varētu apmeklēt informācijas paneļa lapu.

Šajā apmācībā jūs uzzināsit, kā izveidot aizsargātus maršrutus React lietojumprogrammā.

Ņemiet vērā, ka jūs izmantosit React Router v6, kas nedaudz atšķiras no iepriekšējām versijām.

Darba sākšana

Lai sāktu, izmantojiet izveidot-reaģēt-lietotni lai palaistu vienkāršu React lietojumprogrammu.

npx izveidot-reaģēt-lietotni aizsargāt-maršrutus-reaģēt

Pārejiet uz tikko izveidoto mapi un palaidiet lietojumprogrammu.

cd aizsargāt-ceļi-reaģēt
npm sākums

Atveriet lietojumprogrammas mapi ar vēlamo teksta redaktoru un notīriet to. Jūsu app.js vajadzētu izskatīties šādi.

function App() {
 atgriezties ;
}
eksportēt noklusējuma lietotni;

Tagad esat gatavs iestatīt maršrutus.

Saistīts: Kā izveidot savu pirmo reakcijas lietotni, izmantojot JavaScript

React maršrutētāja iestatīšana

Jūs izmantosiet React Router, lai iestatītu savas lietojumprogrammas navigāciju.

Uzstādīt reaģēt-router-dom.

npm instalējiet react-router-dom

Šai lietojumprogrammai jums būs trīs galvenās lapas:

• Mājas lapa (galvenā lapa).
• Profila lapa (aizsargāta, tāpēc piekļuve ir tikai lietotājiem, kuri ir pieteikušies).
• Par lapu (publisks, lai ikviens varētu tai piekļūt).

In Navbar.js, izmantojiet Saite komponents no reaģēt-router-dom lai izveidotu navigācijas saites uz dažādiem ceļiem.

const { Saite } = prasīt ("react-router-dom");
const Navbar = () => {
 atgriezties (

 );
};
eksportēt noklusējuma navigācijas joslu;

In app.js izveidot maršrutus, kas atbilst saitēm navigācijas izvēlnē.

importēt { BrowserRouter as Router, Routes, Route } no "react-router-dom";
importēt Navbar no "./Navbar";
importēt Sākums no "./Home";
importēt profilu no "./Profile";
importēt About no "./About";
function App() {
 atgriezties (



} />
} />
} />


 );
}
eksportēt noklusējuma lietotni;

Tagad jums ir jāizveido komponenti, kuros esat atsaucies App.js.

In Sākums.js:

const Sākums = () => {
 atgriezties 
Mājas lapa
;
};
eksportēt noklusējuma sākumlapu;

In Profils.js

const Profils = () => {
 atgriezties 
Profila lapa
;
};
eksportēt noklusējuma profilu;

In About.js

const Par = () => {
 atgriezties 
Par lapu
;
};
eksporta noklusējuma Par;

Aizsargātu maršrutu izveide programmā React

Nākamais ir aizsargātu maršrutu izveide. The mājas un par maršruti ir publiski, kas nozīmē, ka tiem var piekļūt ikviens, taču profila maršrutam vispirms ir jāautentificējas lietotāji. Tāpēc jums ir jāizveido veids, kā pieteikties lietotājiem.

Viltus autentifikācijas iestatīšana

Tā kā šī nav autentifikācijas apmācība, jūs izmantosit React useState āķis lai modelētu pieteikšanās sistēmu.

In App.js, pievienojiet tālāk norādīto.

importēt { Routes, Route, BrowserRouter } no "react-router-dom";
importēt { useState } no "react";
// Citi importa stamementi
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (patiess);
 };
 const logOut = () => {
 setisLoggedIn (nepatiess);
 };
 atgriezties (


 {isLoggedIn? (
Izlogoties
 ): (
Pieslēgties
 )}



 );
}
eksportēt noklusējuma lietotni;

Šeit jūs izsekojat tā lietotāja pieteikšanās statusam, kurš izmanto statusu. Jums ir divas pogas, pieteikšanās un atteikšanās poga. Šīs pogas tiek atveidotas pēc kārtas atkarībā no tā, vai lietotājs ir vai nav pieteicies.

Ja lietotājs ir atteicies, tiek parādīta pieteikšanās poga. Noklikšķinot uz tā, tiks aktivizēta pieteikšanās funkcija, kas atjauninās isLoggedIn stāvoklī uz patiesu un savukārt displejs no pieteikšanās līdz atteikšanās pogai.

Saistīts: Kas ir lietotāja autentifikācija un kā tā darbojas?

Privāto komponentu aizsardzība

Lai aizsargātu maršrutus, arī privātajām sastāvdaļām ir jābūt piekļuvei isLoggedIn vērtību. To var izdarīt, izveidojot jaunu komponentu, kas pieņem isLoggedIn valsts kā butaforija un privātā sastāvdaļa kā bērns.

Piemēram, ja jūsu jaunajam komponentam ir nosaukums “Aizsargāts”, jūs atveidosit šādu privāto komponentu.

Aizsargātais komponents pārbaudīs, vai isLoggedIn ir patiess vai nepatiess. Ja tā ir taisnība, tas turpināsies un atgriezīs privāto komponentu. Ja tas ir nepatiess, tas novirzīs lietotāju uz lapu, kurā viņš var pieteikties.

Uzziniet vairāk par citiem veidiem, kā varat renderēt komponentu atkarībā no šī raksta nosacījumiem nosacījuma renderēšana programmā React.

Savā lietojumprogrammā izveidojiet Protected.js.

importēt { Navigēt } no "react-router-dom";
const Protected = ({ isLoggedIn, bērni }) => {
 if (!isLoggedIn) {
 atgriezties ;
 }
 atgriezt bērnus;
};
eksporta noklusējuma Aizsargāts;

Šajā komponentā priekšraksts if tiek izmantots, lai pārbaudītu, vai lietotājs ir autentificēts. Ja tās nav, Naviģēt no reaģēt-router-dom novirza tos uz sākumlapu. Tomēr, ja lietotājs ir autentificēts, tiek renderēts pakārtotais komponents.

Izmantot Protected.js iekšā App.js modificēt Profils lapas maršruts.

 path="/profils"
 elements={



 }
/>

App.js vajadzētu izskatīties šādi.

importēt { Routes, Route, BrowserRouter } no "react-router-dom";
importēt { useState } no "react";
importēt Navbar no "./Navbar";
imports Aizsargāts no "./Protected";
importēt Sākums no "./Home";
importēt About no "./About";
importēt profilu no "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (patiess);
 };
 const logOut = () => {
 setisLoggedIn (nepatiess);
 };
 atgriezties (




 {isLoggedIn? (
Izlogoties
 ): (
Pieslēgties
 )}

} />
 elements={



 }
 />
} />





 );
}
eksportēt noklusējuma lietotni;

Tas ir, veidojot aizsargātus maršrutus. Tagad profila lapai varat piekļūt tikai tad, ja esat pieteicies. Ja mēģināsit pāriet uz profila lapu, nepiesakoties, tiksiet novirzīts uz sākumlapu.

Uz lomu balstīta piekļuves kontrole

Šajā apmācībā tika parādīts, kā varat ierobežot neautentificētu lietotāju piekļuvi lapai lietojumprogrammā React. Dažos gadījumos jums var būt nepieciešams iet vēl tālāk un ierobežot lietotājus, pamatojoties uz viņu lomām. Piemēram, lapai var būt analītikas lapa, kas nodrošina piekļuvi tikai administratoriem. Šeit jums būs jāpievieno loģika aizsargātajā komponentā, kas pārbauda, ​​vai lietotājs atbilst nepieciešamajiem nosacījumiem.

Kā ieviest nosacījumu renderēšanu programmā React.js (ar piemēriem)

Nosacītā renderēšana ir noderīgs veids, kā uzlabot lietotni. Šeit ir daži veidi, kā to izmantot.

Lasiet Tālāk

Par autoru