Kaitstud marsruudid on need marsruudid, mis annavad juurdepääsu ainult volitatud kasutajatele. See tähendab, et kasutajad peavad enne konkreetsele marsruudile juurdepääsu täitma teatud tingimused. Näiteks võib teie rakendus nõuda, et armatuurlaua lehte külastaksid ainult sisselogitud kasutajad.

Sellest õpetusest saate teada, kuidas luua Reacti rakenduses kaitstud marsruute.

Pange tähele, et kasutate React Router v6, mis erineb pisut eelmistest versioonidest.

Alustamine

Alustamiseks kasutage loo-reageeri rakendus lihtsa Reacti rakenduse alglaadimiseks.

npx luua-reageerida-rakendust kaitsta-marsruute-reageerida

Liikuge äsja loodud kausta ja käivitage rakendus.

cd kaitsta-marsruute-reageerida
npm start

Avage eelistatud tekstiredaktoriga rakenduste kaust ja puhastage see. Sinu app.js peaks välja nägema selline.

function App() {
 tagasi ;
}
ekspordi vaikerakendus;

Nüüd olete valmis marsruute seadistama.

Seotud: Kuidas luua JavaScriptiga oma esimene reageerimisrakendus

Reacti ruuteri seadistamine

Rakenduse navigeerimise seadistamiseks kasutate React Routerit.

Installige reageerida-ruuter-dom.

npm install react-ruuter-dom

Selle rakenduse jaoks on teil kolm põhilehte:

• Avaleht (maandumisleht).
• Profiilileht (kaitstud, seega pääsevad ligi ainult sisselogitud kasutajad).
• Teave lehe kohta (avalik, et igaüks saaks sellele juurde pääseda).

sisse Navbar.js, kasuta Link komponent pärit reageerida-ruuter-dom navigeerimislinkide loomiseks erinevatele teedele.

const { Link } = nõuda("react-ruuter-dom");
const Navbar = () => {
 tagasi (

 );
};
ekspordi vaikimisi Navbar;

sisse app.js looge marsruudid, mis vastavad navigeerimismenüü linkidele.

import { BrowserRouter as Router, Routes, Route } kohast "react-router-dom";
importida navigeerimisriba saidilt "./Navbar";
importida kodulehest "./Home";
importida profiil saidist "./Profile";
import Teave rakendusest "./About";
function App() {
 tagasi (



} />
} />
} />


 );
}
ekspordi vaikerakendus;

Nüüd peate looma komponendid, milles olete viidanud App.js.

sisse Home.js:

const Avaleht = () => {
 tagasi 
Avaleht
;
};
ekspordi vaikimisi Kodu;

sisse Profile.js

const Profiil = () => {
 tagasi 
Profiilileht
;
};
ekspordi vaikeprofiil;

sisse About.js

const Teave = () => {
 tagasi 
Teave lehe kohta
;
};
ekspordi vaikeseade Teave;

Kaitstud marsruutide loomine Reactis

Järgmine on kaitstud marsruutide loomine. The Kodu ja umbes marsruudid on avalikud, mis tähendab, et igaüks pääseb neile juurde, kuid profiili marsruut nõuab kasutajate esmast autentimist. Seetõttu peate looma kasutajate sisselogimise viisi.

Võltsitud autentimise seadistamine

Kuna see ei ole autentimisõpetus, kasutate Reacti kasutaState konksu sisselogimissüsteemi simuleerimiseks.

sisse App.js, lisage järgmine.

import { Routes, Route, BrowserRouter } kataloogist "react-router-dom";
import { useState } kohast "react";
// Muud impordi stamemendid
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logiIn = () => {
 setisLoggedIn (tõene);
 };
 const väljalogimine = () => {
 setisLoggedIn (vale);
 };
 tagasi (


 {isLoggedIn? (
Logi välja
 ): (
Logi sisse
 )}



 );
}
ekspordi vaikerakendus;

Siin jälgite olekut kasutava kasutaja sisselogimise olekut. Teil on kaks nuppu, sisselogimis- ja väljalogimisnupp. Need nupud renderdatakse kordamööda sõltuvalt sellest, kas kasutaja on sisse logitud või mitte.

Kui kasutaja on välja logitud, kuvatakse sisselogimisnupp. Sellel klõpsamine käivitab sisselogimisfunktsiooni, mis värskendab on sisselogitud olek tõeseks ja omakorda kuva sisselogimisest väljalogimisnupuni.

Seotud: Mis on kasutaja autentimine ja kuidas see töötab?

Privaatsete komponentide kaitsmine

Marsruutide kaitsmiseks peab privaatsetel komponentidel olema juurdepääs ka on sisselogitud väärtus. Seda saate teha, luues uue komponendi, mis aktsepteerib on sisselogitud olek kui rekvisiit ja erakomponent kui laps.

Näiteks kui teie uue komponendi nimi on "Kaitstud", renderdaksite privaatse komponendi niimoodi.

Kaitstud komponent kontrollib, kas on sisselogitud on tõsi või vale. Kui see on tõsi, läheb see edasi ja tagastab privaatkomponendi. Kui see on vale, suunab see kasutaja lehele, kus ta saab sisse logida.

Sellest artiklist leiate lisateavet muude viiside kohta, mida saate kasutada komponendi renderdamiseks sõltuvalt tingimustest tingimuslik renderdamine rakenduses React.

Looge oma rakenduses Protected.js.

import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, lapsed }) => {
 if (!isLoggedIn) {
 tagasi ;
 }
 tagastada lapsed;
};
ekspordi vaikimisi Kaitstud;

Selles komponendis kasutatakse if-lauset, et kontrollida, kas kasutaja on autentitud. Kui nad seda ei ole, Navigeerige alates reageerida-ruuter-dom suunab nad avalehele. Kui aga kasutaja on autentitud, renderdatakse alamkomponent.

Kasuta Protected.js sisse App.js muuta Profiil lehe marsruut.

 path="/profiil"
 element={



 }
/>

App.js peaks välja nägema selline.

import { Routes, Route, BrowserRouter } kataloogist "react-router-dom";
import { useState } kohast "react";
importida navigeerimisriba saidilt "./Navbar";
import Kaitstud "./Protected" eest;
importida kodulehest "./Home";
import Teave rakendusest "./About";
importida profiil saidist "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logiIn = () => {
 setisLoggedIn (tõene);
 };
 const väljalogimine = () => {
 setisLoggedIn (vale);
 };
 tagasi (




 {isLoggedIn? (
Logi välja
 ): (
Logi sisse
 )}

} />
 element={



 }
 />
} />





 );
}
ekspordi vaikerakendus;

See on kaitstud marsruutide loomisel. Nüüd pääsete profiililehele ainult siis, kui olete sisse logitud. Kui proovite navigeerida profiililehele ilma sisse logimata, suunatakse teid avalehele.

Rollipõhine juurdepääsukontroll

See õpetus näitas, kuidas saate piirata autentimata kasutajatel Reacti rakenduses lehele juurdepääsu. Mõnel juhul peate võib-olla minema veelgi kaugemale ja piirama kasutajaid nende rollide alusel. Näiteks võite lasta lehel nimetada analüüsilehte, mis annab juurdepääsu ainult administraatoritele. Siin peate kaitstud komponendis lisama loogika, mis kontrollib, kas kasutaja vastab nõutavatele tingimustele.

Tingimusliku renderdamise rakendamine failis React.js (näidetega)

Tingimuslik renderdamine on kasulik viis rakenduse täiustamiseks. Siin on valik selle kasutamise viise.

Loe edasi

Autori kohta