Chránené cesty sú tie cesty, ktoré poskytujú prístup iba oprávneným používateľom. To znamená, že používatelia musia najprv splniť určité podmienky, kým pristúpia na konkrétnu trasu. Vaša aplikácia môže napríklad vyžadovať, aby stránku ovládacieho panela mohli navštíviť iba prihlásení používatelia.

V tomto návode sa naučíte, ako vytvoriť chránené trasy v aplikácii React.

Upozorňujeme, že budete používať React Router v6, ktorý je trochu odlišný od predchádzajúcich verzií.

Začíname

Ak chcete začať, použite create-react-app na zavedenie jednoduchej aplikácie React.

npx create-react-app protect-routes-react

Prejdite do práve vytvoreného priečinka a spustite aplikáciu.

cd protect-routes-react
npm štart

Otvorte priečinok aplikácie pomocou preferovaného textového editora a vyčistite ho. Váš app.js by mal vyzerať takto.

function App() {
 vrátiť ;
}
exportovať predvolenú aplikáciu;

Teraz ste pripravení nastaviť trasy.

Súvisiace: Ako vytvoriť aplikáciu First React pomocou JavaScriptu

Nastavenie smerovača React

Na nastavenie navigácie pre vašu aplikáciu použijete React Router.

Inštalácia reagovať-smerovač-dom.

npm install reag-router-dom

Pre túto aplikáciu budete mať tri hlavné stránky:

• Domovská stránka (vstupná stránka).
• Stránka profilu (chránená, takže prístup majú iba prihlásení používatelia).
• O stránke (verejná, aby k nej mal prístup ktokoľvek).

In Navbar.js, Použi Odkaz komponent z reagovať-smerovač-dom vytvoriť navigačné odkazy na rôzne cesty.

const { Link } = require("react-router-dom");
const Navbar = () => {
 vrátiť (

 );
};
exportovať predvolený navigačný panel;

In app.js vytvorte trasy zodpovedajúce odkazom v navigačnom menu.

import { BrowserRouter as Router, Routes, Route } z "react-router-dom";
importovať navigačný panel z "./Navbar";
importovať domov z "./Home";
importovať profil z "./Profile";
importovať O z "./O";
function App() {
 vrátiť (



} />
} />
} />


 );
}
exportovať predvolenú aplikáciu;

Teraz musíte vytvoriť komponenty, na ktoré ste odkazovali App.js.

In Home.js:

const Home = () => {
 vrátiť 
Domovská stránka
;
};
exportovať predvolenú domovskú stránku;

In Profile.js

const Profil = () => {
 vrátiť 
Profilová stránka
;
};
exportovať predvolený profil;

In About.js

const About = () => {
 vrátiť 
O stránke
;
};
exportovať predvolené O aplikácii;

Vytváranie chránených trás v React

Ďalej je to vytváranie chránených ciest. The Domov a o trasy sú verejné, čo znamená, že k nim môže pristupovať ktokoľvek, ale trasa profilu vyžaduje, aby sa používatelia najskôr overili. Preto si musíte vytvoriť spôsob prihlasovania používateľov.

Nastavenie falošnej autentifikácie

Keďže toto nie je návod na overenie, použijete React useState hák na simuláciu prihlasovacieho systému.

In App.js, pridajte nasledujúce.

import { Routes, Route, BrowserRouter } z "react-router-dom";
import { useState } z "reagovať";
// Iné údaje o importe
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const login = () => {
 setisLoggedIn (pravda);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 vrátiť (


 {je prihlásený? (
Odhlásiť sa
 ): (
Prihlásiť sa
 )}



 );
}
exportovať predvolenú aplikáciu;

Tu sledujete stav prihlásenia používateľa pomocou stavu. Máte dve tlačidlá, prihlasovacie a odhlasovacie. Tieto tlačidlá sa vykresľujú postupne v závislosti od toho, či je používateľ prihlásený alebo nie.

Ak je používateľ odhlásený, zobrazí sa tlačidlo prihlásenia. Kliknutím naň sa spustí funkcia prihlásenia, ktorá aktualizuje isLoggedIn stav na true a následne zobrazenie od prihlásenia po tlačidlo odhlásenia.

Súvisiace: Čo je autentifikácia používateľa a ako funguje?

Ochrana súkromných komponentov

Na ochranu trás musia mať súkromné ​​komponenty tiež prístup k isLoggedIn hodnotu. Môžete to urobiť vytvorením nového komponentu, ktorý akceptuje isLoggedIn štát ako rekvizita a súkromná zložka ako dieťa.

Napríklad, ak je váš nový komponent pomenovaný ako "chránený", vykreslili by ste takýto súkromný komponent.

Chránený komponent skontroluje, či isLoggedIn je pravda alebo nepravda. Ak je to pravda, bude pokračovať a vráti komponent Private. Ak je nepravda, presmeruje používateľa na stránku, kde sa môže prihlásiť.

V tomto článku sa dozviete viac o ďalších spôsoboch, ktoré môžete použiť na vykreslenie komponentu v závislosti od podmienok podmienené vykresľovanie v Reacte.

Vo svojej aplikácii vytvorte Protected.js.

import { Navigovať } z "react-router-dom";
const Protected = ({ isLoggedIn, deti }) => {
 if (!isLoggedIn) {
 vrátiť ;
 }
 vrátiť deti;
};
exportovať predvolené Chránené;

V tomto komponente sa príkaz if používa na kontrolu, či je používateľ autentifikovaný. Ak nie sú, Navigovať od reagovať-smerovač-dom presmeruje ich na domovskú stránku. Ak je však používateľ autentifikovaný, podriadený komponent sa vykreslí.

Použite Protected.js v App.js upraviť Profil trasa stránky.

 path="/profile"
 element={



 }
/>

App.js by mal vyzerať takto.

import { Routes, Route, BrowserRouter } z "react-router-dom";
import { useState } z "reagovať";
importovať navigačný panel z "./Navbar";
import Chránené pred "./Protected";
importovať domov z "./Home";
importovať O z "./O";
importovať profil z "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const login = () => {
 setisLoggedIn (pravda);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 vrátiť (




 {je prihlásený? (
Odhlásiť sa
 ): (
Prihlásiť sa
 )}

} />
 element={



 }
 />
} />





 );
}
exportovať predvolenú aplikáciu;

To je všetko o vytváraní chránených ciest. Teraz máte prístup na stránku profilu, iba ak ste prihlásení. Ak sa pokúsite prejsť na stránku profilu bez prihlásenia, budete presmerovaní na domovskú stránku.

Kontrola prístupu na základe rolí

Tento tutoriál vám ukázal, ako môžete zabrániť neovereným používateľom v prístupe na stránku v aplikácii React. V niektorých prípadoch možno budete musieť zájsť ešte ďalej a obmedziť používateľov na základe ich rolí. Na stránke môžete napríklad uviesť analytickú stránku, ktorá udeľuje prístup iba správcom. Tu budete musieť v chránenom komponente pridať logiku, ktorá kontroluje, či používateľ spĺňa požadované podmienky.

Ako implementovať podmienené vykresľovanie v React.js (s príkladmi)

Podmienené vykresľovanie je užitočný spôsob, ako zlepšiť vašu aplikáciu. Tu je výber spôsobov, ako ho použiť.

Prečítajte si ďalej

O autorovi