A védett útvonalak azok az útvonalak, amelyek csak a jogosult felhasználók számára biztosítanak hozzáférést. Ez azt jelenti, hogy a felhasználóknak először meg kell felelniük bizonyos feltételeknek, mielőtt hozzáférnének az adott útvonalhoz. Például az alkalmazás megkövetelheti, hogy csak a bejelentkezett felhasználók látogassák meg az irányítópult oldalát.

Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre védett útvonalakat egy React alkalmazásban.

Vegye figyelembe, hogy a React Router v6-ot fogja használni, amely kissé eltér a korábbi verzióktól.

Elkezdeni

A kezdéshez használja alkalmazás létrehozása-reagálása egy egyszerű React alkalmazás indításához.

npx create-react-app Protect-routes-react

Keresse meg az éppen létrehozott mappát, és indítsa el az alkalmazást.

cd Protect-Routes-React
npm start

Nyissa meg az alkalmazás mappáját a kívánt szövegszerkesztővel, és tisztítsa meg. A te app.js így kell kinéznie.

function App() {
 Visszatérés ;
}
alapértelmezett alkalmazás exportálása;

Most már készen áll az útvonalak beállítására.

Összefüggő: Hogyan készítsd el First React alkalmazásodat JavaScripttel

A React Router beállítása

A React Router segítségével beállíthatja az alkalmazás navigációját.

Telepítés react-router-dom.

npm install react-router-dom

Ehhez az alkalmazáshoz három fő oldala lesz:

• Kezdőlap (a céloldal).
• Profiloldal (védett, így csak a bejelentkezett felhasználók férhetnek hozzá).
• Névjegy oldal (nyilvános, így bárki hozzáférhet).

Ban ben Navbar.js, használja a Link komponensből react-router-dom különböző útvonalakhoz vezető navigációs hivatkozások létrehozásához.

const { Link } = request("react-router-dom");
const Navbar = () => {
 Visszatérés (

 );
};
alapértelmezett Navbar exportálása;

Ban ben app.js hozza létre a navigációs menüben található hivatkozásoknak megfelelő útvonalakat.

import { BrowserRouter as Router, Routes, Route } innen: "react-router-dom";
Navbar importálása a "./Navbar"-ból;
Import Home from "./Home";
Import Profile from "./Profile";
import Névjegy innen: "./About";
function App() {
 Visszatérés (



} />
} />
} />


 );
}
alapértelmezett alkalmazás exportálása;

Most létre kell hoznia azokat az összetevőket, amelyekben hivatkozott App.js.

Ban ben Home.js:

const Főoldal = () => {
 Visszatérés 
Kezdőlap
;
};
export alapértelmezett Kezdőlap;

Ban ben Profil.js

const Profil = () => {
 Visszatérés 
Profil oldal
;
};
alapértelmezett profil exportálása;

Ban ben About.js

const Névjegy = () => {
 Visszatérés 
Az oldalról
;
};
export alapértelmezett Névjegy;

Védett útvonalak létrehozása a Reactban

A következő lépés a védett útvonalak létrehozása. Az itthon és ról ről Az útvonalak nyilvánosak, vagyis bárki hozzáférhet hozzájuk, de a profilútvonalhoz először hitelesíteni kell a felhasználókat. Ezért létre kell hoznia egy módot a felhasználók bejelentkezésére.

Hamis hitelesítés beállítása

Mivel ez nem hitelesítési oktatóanyag, a Reactet fogja használni useState hook bejelentkezési rendszer szimulálására.

Ban ben App.js, adja hozzá a következőket.

import { Routes, Route, BrowserRouter } innen: "react-router-dom";
import { useState } from "react";
// Egyéb import stamentumok
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const bejelentkezés = () => {
 setisLoggedIn (igaz);
 };
 const kijelentkezés = () => {
 setisLoggedIn (hamis);
 };
 Visszatérés (


 {isLoggedIn? (
Kijelentkezés
 ): (
Belépés
 )}



 );
}
alapértelmezett alkalmazás exportálása;

Itt követi a felhasználó bejelentkezési állapotát az állapot használatával. Két gombja van, a bejelentkezés és a kijelentkezés gomb. Ezek a gombok felváltva jelennek meg attól függően, hogy a felhasználó be van-e jelentkezve vagy sem.

Ha a felhasználó ki van jelentkezve, megjelenik a bejelentkezés gomb. A rákattintás elindítja a bejelentkezési funkciót, amely frissíti a be van jelentkezve állapotot igazra, majd a kijelzőt a bejelentkezéstől a kijelentkezés gombig.

Összefüggő: Mi az a felhasználói hitelesítés és hogyan működik?

A privát komponensek védelme

Az útvonalak védelme érdekében a privát komponenseknek is hozzá kell férniük a be van jelentkezve érték. Ezt megteheti egy új összetevő létrehozásával, amely elfogadja a be van jelentkezve az állam kellékként, a privát komponens pedig gyerekként.

Például, ha az új összetevő neve "Védett", akkor egy ilyen privát összetevőt kell előállítania.

A Protected komponens ellenőrzi, hogy be van jelentkezve igaz vagy hamis. Ha ez igaz, akkor továbblép, és visszaadja a Privát összetevőt. Ha hamis, akkor átirányítja a felhasználót egy oldalra, ahol bejelentkezhet.

Ebből a cikkből többet megtudhat az összetevők előállításának egyéb módjairól a feltételektől függően feltételes megjelenítés a Reactban.

Az alkalmazásban hozzon létre Protected.js.

import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
 if (!isLoggedIn) {
 Visszatérés ;
 }
 gyerekek visszaküldése;
};
export alapértelmezett Védett;

Ebben a komponensben az if utasítást használják annak ellenőrzésére, hogy a felhasználó hitelesített-e. Ha nem azok, Hajózik tól től react-router-dom átirányítja őket a kezdőlapra. Ha azonban a felhasználó hitelesítve van, a rendszer a gyermekkomponenst jeleníti meg.

Használat Protected.js ban ben App.js módosítani a Profil oldal útvonala.

 path="/profil"
 elem={



 }
/>

App.js így kell kinéznie.

import { Routes, Route, BrowserRouter } innen: "react-router-dom";
import { useState } from "react";
Navbar importálása a "./Navbar"-ból;
import Védett a "./Protected"-től;
Import Home from "./Home";
import Névjegy innen: "./About";
Import Profile from "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const bejelentkezés = () => {
 setisLoggedIn (igaz);
 };
 const kijelentkezés = () => {
 setisLoggedIn (hamis);
 };
 Visszatérés (




 {isLoggedIn? (
Kijelentkezés
 ): (
Belépés
 )}

} />
 elem={



 }
 />
} />





 );
}
alapértelmezett alkalmazás exportálása;

Ennyi a védett útvonalak létrehozásáról. Mostantól csak akkor érheti el a Profil oldalt, ha be van jelentkezve. Ha bejelentkezés nélkül próbál meg navigálni a Profil oldalra, akkor a rendszer a kezdőlapra irányítja át.

Szerep alapú hozzáférés-vezérlés

Ez az oktatóanyag megmutatta, hogyan korlátozhatja a nem hitelesített felhasználókat abban, hogy hozzáférjenek egy oldalhoz a React alkalmazásban. Bizonyos esetekben előfordulhat, hogy még tovább kell lépnie, és a felhasználókat szerepkörük alapján korlátoznia kell. Lehet például egy oldal, mondjuk egy analitikai oldal, amely csak a rendszergazdáknak ad hozzáférést. Itt logikát kell hozzáadnia a Protected összetevőhöz, amely ellenőrzi, hogy egy felhasználó megfelel-e a szükséges feltételeknek.

A feltételes renderelés megvalósítása a React.js-ben (példákkal)

A feltételes megjelenítés hasznos módja az alkalmazás fejlesztésének. Íme néhány felhasználási mód.

Olvassa el a következőt

A szerzőről