Apsaugoti maršrutai yra tie maršrutai, kurie suteikia prieigą tik įgaliotiems vartotojams. Tai reiškia, kad naudotojai pirmiausia turi atitikti tam tikras sąlygas, kad galėtų pasiekti tą konkretų maršrutą. Pavyzdžiui, jūsų programa gali reikalauti, kad tik prisijungę vartotojai galėtų apsilankyti informacijos suvestinės puslapyje.

Šiame vadove sužinosite, kaip kurti apsaugotus maršrutus React programoje.

Atminkite, kad naudosite „React Router v6“, kuri šiek tiek skiriasi nuo ankstesnių versijų.

Darbo pradžia

Norėdami pradėti, naudokite kurti-reaguoti-programėlę paleisti paprastą React programą.

npx sukurti-reaguoti-app Protect-routes-react

Eikite į ką tik sukurtą aplanką ir paleiskite programą.

cd apsaugoti-maršrutai-reaguoti
npm pradžia

Atidarykite programos aplanką naudodami pageidaujamą teksto rengyklę ir išvalykite. Tavo app.js turėtų atrodyti taip.

function App() {
 grąžinti ;
}
eksportuoti numatytąją programą;

Dabar esate pasirengę nustatyti maršrutus.

Susijęs: Kaip sukurti savo pirmosios reakcijos programą naudojant „JavaScript“.

React maršrutizatoriaus nustatymas

Norėdami nustatyti savo programos naršymą, naudosite „React Router“.

Diegti react-router-dom.

npm įdiegti react-router-dom

Šiai programai turėsite tris pagrindinius puslapius:

• Pagrindinis puslapis (nukreipimo puslapis).
• Profilio puslapis (apsaugotas, todėl prieigą turi tik prisijungę vartotojai).
• Apie puslapį (viešas, kad visi galėtų jį pasiekti).

Į Navbar.js, naudoti Nuoroda komponentas iš react-router-dom sukurti naršymo nuorodas į įvairius kelius.

const { Nuoroda } = reikalauti("react-router-dom");
const Navbar = () => {
 grįžti (

 );
};
eksportuoti numatytąją navigacijos juostą;

Į app.js sukurti maršrutus, atitinkančius nuorodas navigacijos meniu.

importuoti { BrowserRouter as Router, Routes, Route } iš "react-router-dom";
importuoti „Navbar“ iš „./Navbar“;
importuoti Pradžia iš "./Home";
importuoti profilį iš "./Profile";
importuoti Apie iš "./Apie";
function App() {
 grįžti (



} />
} />
} />


 );
}
eksportuoti numatytąją programą;

Dabar turite sukurti komponentus, kuriuose nurodėte App.js.

Į Home.js:

const Pagrindinis puslapis = () => {
 grąžinti 
Pagrindinis puslapis
;
};
eksportuoti pagal numatytuosius nustatymus Pagrindinis puslapis;

Į Profile.js

const profilis = () => {
 grąžinti 
Profilio puslapis
;
};
eksportuoti numatytąjį profilį;

Į About.js

const Apie = () => {
 grąžinti 
Apie puslapį
;
};
eksportuoti pagal nutylėjimą Apie;

Apsaugotų maršrutų kūrimas „React“.

Toliau reikia sukurti saugomus maršrutus. The namai ir apie maršrutai yra vieši, o tai reiškia, kad juos gali pasiekti bet kas, tačiau profilio maršrutui pirmiausia reikia autentifikuoti naudotojus. Todėl jūs turite sukurti būdą prisijungti prie vartotojų.

Suklastoto autentifikavimo nustatymas

Kadangi tai nėra autentifikavimo pamoka, naudosite „React“. useState kabliukas imituoti prisijungimo sistemą.

Į App.js, pridėkite toliau pateiktą informaciją.

importuoti { Routes, Route, BrowserRouter } iš "react-router-dom";
importuoti { useState } iš "react";
// Kiti importo stulpeliai
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (tiesa);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 grįžti (


 {isPrisijungęs? (
Atsijungti
 ): (
Prisijungti
 )}



 );
}
eksportuoti numatytąją programą;

Čia jūs stebite vartotojo prisijungimo būseną naudojant būseną. Turite du mygtukus – prisijungimo ir atsijungimo mygtuką. Šie mygtukai pateikiami paeiliui, atsižvelgiant į tai, ar vartotojas yra prisijungęs, ar ne.

Jei vartotojas yra atsijungęs, rodomas prisijungimo mygtukas. Spustelėjus jį, suaktyvinama prisijungimo funkcija, kuri atnaujins isPrisijungęs būseną į true ir savo ruožtu rodomas nuo prisijungimo iki atsijungimo mygtuko.

Susijęs: Kas yra vartotojo autentifikavimas ir kaip jis veikia?

Privačių komponentų apsauga

Siekiant apsaugoti maršrutus, privatūs komponentai taip pat turi turėti prieigą prie isPrisijungęs vertė. Tai galite padaryti sukurdami naują komponentą, kuris priima isPrisijungęs būsena kaip butaforija ir privatus komponentas kaip vaikas.

Pavyzdžiui, jei jūsų naujasis komponentas pavadintas „Apsaugota“, sukurtumėte tokį privatų komponentą.

Apsaugotas komponentas patikrins, ar isPrisijungęs yra tiesa ar klaidinga. Jei tai tiesa, jis eis į priekį ir grąžins privatų komponentą. Jei jis klaidingas, jis nukreips vartotoją į puslapį, kuriame jis galės prisijungti.

Sužinokite daugiau apie kitus būdus, kuriuos galite naudoti norėdami pateikti komponentą, atsižvelgdami į šiame straipsnyje pateiktas sąlygas sąlyginis atvaizdavimas React.

Savo programoje sukurkite Protected.js.

importuoti { Navigate } iš "react-router-dom";
const Protected = ({ isLoggedIn, vaikai }) => {
 if (!isLoggedIn) {
 grąžinti ;
 }
 grąžinti vaikus;
};
eksporto numatytasis Apsaugotas;

Šiame komponente if sakinys naudojamas patikrinti, ar vartotojas autentifikuotas. Jei jų nėra, Rodyti kelią iš react-router-dom nukreipia juos į pagrindinį puslapį. Tačiau, jei vartotojas yra autentifikuotas, antrinis komponentas pateikiamas.

Naudokite Protected.js in App.js modifikuoti Profilis puslapio maršrutas.

 path="/profile"
 element={



 }
/>

App.js turėtų atrodyti taip.

importuoti { Routes, Route, BrowserRouter } iš "react-router-dom";
importuoti { useState } iš "react";
importuoti „Navbar“ iš „./Navbar“;
importas Apsaugotas nuo "./Protected";
importuoti Pradžia iš "./Home";
importuoti Apie iš "./Apie";
importuoti profilį iš "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (tiesa);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 grįžti (




 {isPrisijungęs? (
Atsijungti
 ): (
Prisijungti
 )}

} />
 element={



 }
 />
} />





 );
}
eksportuoti numatytąją programą;

Štai kurdami saugomus maršrutus. Dabar profilio puslapį galite pasiekti tik tada, kai esate prisijungę. Jei bandysite pereiti į profilio puslapį neprisijungę, būsite nukreipti į pagrindinį puslapį.

Vaidmenimis pagrįsta prieigos kontrolė

Šioje pamokoje buvo parodyta, kaip galite apriboti neautentifikuotų vartotojų prieigą prie React programos puslapio. Kai kuriais atvejais gali tekti žengti dar toliau ir apriboti naudotojus pagal jų vaidmenis. Pvz., Puslapis gali būti vadinamas analitikos puslapis, suteikiantis prieigą tik administratoriams. Čia turėsite pridėti logiką į apsaugotą komponentą, kuris tikrina, ar vartotojas atitinka reikiamas sąlygas.

Kaip įdiegti sąlyginį atvaizdavimą React.js (su pavyzdžiais)

Sąlyginis pateikimas yra naudingas būdas patobulinti programą. Štai keletas būdų, kaip jį naudoti.

Skaitykite toliau

Apie autorių