Chráněné cesty jsou takové cesty, které udělují přístup pouze oprávněným uživatelům. To znamená, že uživatelé musí nejprve splnit určité podmínky, než přistoupí k dané konkrétní trase. Vaše aplikace může například vyžadovat, aby stránku řídicího panelu mohli navštívit pouze přihlášení uživatelé.

V tomto tutoriálu se naučíte, jak vytvořit chráněné trasy v aplikaci React.

Všimněte si, že budete používat React Router v6, který se trochu liší od předchozích verzí.

Začínáme

Chcete-li začít, použijte create-react-app k zavedení jednoduché aplikace React.

npx create-react-app protect-routes-react

Přejděte do složky, která byla právě vytvořena, a spusťte aplikaci.

cd protect-routes-react
npm start

Otevřete složku aplikace pomocí preferovaného textového editoru a vyčistěte ji. Vaše app.js by měl vypadat takto.

function App() {
 vrátit se ;
}
exportovat výchozí aplikaci;

Nyní jste připraveni nastavit trasy.

Příbuzný: Jak vytvořit aplikaci First React pomocí JavaScriptu

Nastavení routeru React

K nastavení navigace pro vaši aplikaci použijete React Router.

Nainstalujte reagovat-router-dom.

npm install reagovat-router-dom

Pro tuto aplikaci budete mít tři hlavní stránky:

• Domovská stránka (vstupní stránka).
• Stránka profilu (chráněná, takže přístup mají pouze přihlášení uživatelé).
• O stránce (veřejné, aby k ní měl přístup kdokoli).

v Navbar.js, použijte Odkaz komponenta z reagovat-router-dom vytvořit navigační odkazy na různé cesty.

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

 );
};
exportovat výchozí navigační panel;

v app.js vytvořte trasy odpovídající odkazům v navigační nabídce.

import { BrowserRouter as Router, Routes, Route } z "react-router-dom";
import Navbar z "./Navbar";
import Home z "./Home";
importovat profil z "./Profile";
import About from "./About";
function App() {
 vrátit se (



} />
} />
} />


 );
}
exportovat výchozí aplikaci;

Nyní musíte vytvořit komponenty, na které jste odkazovali App.js.

v Home.js:

const Home = () => {
 vrátit se 
Domovská stránka
;
};
exportovat výchozí domovskou stránku;

v Profile.js

const Profil = () => {
 vrátit se 
Profilová stránka
;
};
exportovat výchozí profil;

v About.js

const About = () => {
 vrátit se 
O stránce
;
};
exportovat výchozí O aplikaci;

Vytváření chráněných tras v Reactu

Další na řadě je vytváření chráněných tras. The Domov a o trasy jsou veřejné, což znamená, že k nim může přistupovat kdokoli, ale trasa profilu vyžaduje, aby byli uživatelé nejprve autentizováni. Proto je třeba vytvořit způsob přihlašování uživatelů.

Nastavení falešné autentizace

Protože se nejedná o tutoriál pro ověřování, použijete React háček useState simulovat přihlašovací systém.

v App.js, přidejte následující.

import { Routes, Route, BrowserRouter } z "react-router-dom";
import { useState } z "reagovat";
// Další údaje o importu
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const přihlášení = () => {
 setisLoggedIn (pravda);
 };
 const logOut = () => {
 setisLoggedIn (nepravda);
 };
 vrátit se (


 {je přihlášení? (
Odhlásit se
 ): (
Přihlásit se
 )}



 );
}
exportovat výchozí aplikaci;

Zde sledujete stav přihlášení uživatele pomocí stavu. Máte dvě tlačítka, tlačítko pro přihlášení a tlačítko pro odhlášení. Tato tlačítka se vykreslují postupně v závislosti na tom, zda je uživatel přihlášen nebo ne.

Pokud je uživatel odhlášen, zobrazí se tlačítko přihlášení. Kliknutím na něj se spustí přihlašovací funkce, která aktualizuje isLoggedIn stav na true a střídavě zobrazení od přihlášení k tlačítku odhlášení.

Příbuzný: Co je autentizace uživatele a jak funguje?

Ochrana soukromých komponent

Pro ochranu tras musí mít soukromé komponenty také přístup k isLoggedIn hodnota. Můžete to udělat vytvořením nové komponenty, která přijímá isLoggedIn stát jako rekvizita a soukromá složka jako dítě.

Pokud se například vaše nová komponenta jmenuje „Protected“, vykreslíte soukromou komponentu takto.

Chráněná součást zkontroluje, zda isLoggedIn je pravda nebo nepravda. Pokud je to pravda, bude pokračovat a vrátí komponentu Private. Pokud je nepravda, přesměruje uživatele na stránku, kde se může přihlásit.

Další informace o dalších způsobech, které můžete použít k vykreslení komponenty v závislosti na podmínkách, naleznete v tomto článku podmíněné vykreslování v Reactu.

Ve své aplikaci vytvořte Protected.js.

import { Navigovat } z "react-router-dom";
const Protected = ({ isLoggedIn, děti }) => {
 if (!isLoggedIn) {
 vrátit se ;
 }
 vrátit děti;
};
export default Protected;

V této komponentě se příkaz if používá ke kontrole, zda je uživatel ověřen. Pokud nejsou, Navigovat z reagovat-router-dom přesměruje je na domovskou stránku. Pokud je však uživatel ověřen, podřízená komponenta se vykreslí.

Použití Protected.js v App.js upravit Profil trasa stránky.

 cesta="/profil"
 element={



 }
/>

App.js by měl vypadat takto.

import { Routes, Route, BrowserRouter } z "react-router-dom";
import { useState } z "reagovat";
import Navbar z "./Navbar";
import Chráněno před "./Protected";
import Home z "./Home";
import About from "./About";
importovat profil z "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const přihlášení = () => {
 setisLoggedIn (pravda);
 };
 const logOut = () => {
 setisLoggedIn (nepravda);
 };
 vrátit se (




 {je přihlášení? (
Odhlásit se
 ): (
Přihlásit se
 )}

} />
 element={



 }
 />
} />





 );
}
exportovat výchozí aplikaci;

To je vše o vytváření chráněných cest. Nyní máte přístup na stránku profilu, pouze pokud jste přihlášeni. Pokud se pokusíte přejít na stránku Profil bez přihlášení, budete přesměrováni na domovskou stránku.

Řízení přístupu na základě rolí

Tento tutoriál vám ukázal, jak můžete zabránit neověřeným uživatelům v přístupu na stránku v aplikaci React. V některých případech možná budete muset zajít ještě dále a omezit uživatele na základě jejich rolí. Můžete mít například stránku označenou jako analytická stránka, která uděluje přístup pouze administrátorům. Zde budete muset do komponenty Protected přidat logiku, která kontroluje, zda uživatel splňuje požadované podmínky.

Jak implementovat podmíněné vykreslování v React.js (s příklady)

Podmíněné vykreslování je užitečný způsob, jak aplikaci vylepšit. Zde je výběr způsobů, jak jej použít.

Přečtěte si další

O autorovi