Zaščitene poti so tiste poti, ki omogočajo dostop samo pooblaščenim uporabnikom. To pomeni, da morajo uporabniki najprej izpolniti določene pogoje, preden dostopajo do določene poti. Vaša aplikacija lahko na primer zahteva, da samo prijavljeni uporabniki obiščejo stran nadzorne plošče.

V tej vadnici se boste naučili, kako ustvarite zaščitene poti v aplikaciji React.

Upoštevajte, da boste uporabljali React Router v6, ki se nekoliko razlikuje od prejšnjih različic.

Kako začeti

Za začetek uporabite ustvari-reagiraj-aplikacijo za zagon preproste aplikacije React.

npx create-react-app protect-routes-react

Pomaknite se do mape, ki je bila pravkar ustvarjena, in zaženite aplikacijo.

cd protect-routes-react
npm start

Odprite mapo aplikacije z želenim urejevalnikom besedil in jo počistite. Vaš app.js bi moral izgledati takole.

funkcija App() {
 vrnitev ;
}
izvoz privzete aplikacije;

Zdaj ste pripravljeni za nastavitev poti.

Povezano: Kako ustvariti svojo prvo aplikacijo React z JavaScript

Nastavitev usmerjevalnika React

Za nastavitev navigacije za vašo aplikacijo boste uporabili React Router.

Namestite odziv-usmerjevalnik-dom.

npm install react-router-dom

Za to aplikacijo boste imeli tri glavne strani:

• Domača stran (pristajalna stran).
• Stran profila (zaščitena, zato imajo dostop samo prijavljeni uporabniki).
• O strani (javno, tako da lahko vsakdo dostopa do nje).

V Navbar.js, uporabi Povezava komponenta iz odziv-usmerjevalnik-dom za ustvarjanje navigacijskih povezav do različnih poti.

const { Povezava } = require("react-router-dom");
const Navbar = () => {
 vrnitev (

 );
};
izvoz privzeto Navbar;

V app.js ustvarite poti, ki se ujemajo s povezavami v navigacijskem meniju.

import { BrowserRouter as Router, Routes, Route } iz "react-router-dom";
uvozi Navbar iz "./Navbar";
uvoz domov iz "./Home";
uvozi profil iz "./Profil";
uvozi About iz "./About";
funkcija App() {
 vrnitev (



} />
} />
} />


 );
}
izvoz privzete aplikacije;

Zdaj morate ustvariti komponente, na katere ste se sklicali App.js.

V Home.js:

const Domov = () => {
 vrnitev 
Domača stran
;
};
izvoz privzeto Domov;

V Profile.js

const profil = () => {
 vrnitev 
Stran s profilom
;
};
izvoz privzetega profila;

V About.js

const O = () => {
 vrnitev 
O strani
;
};
izvoz privzeto O;

Ustvarjanje zaščitenih poti v Reactu

Naslednji korak je ustvarjanje zaščitenih poti. The doma in približno poti so javne, kar pomeni, da lahko vsakdo dostopa do njih, vendar profilna pot zahteva, da so uporabniki najprej overjeni. Zato morate ustvariti način za prijavo uporabnikov.

Nastavitev lažne avtentikacije

Ker to ni vadnica za preverjanje pristnosti, boste uporabili React useState hook za simulacijo sistema za prijavo.

V App.js, dodajte naslednje.

import { Routes, Route, BrowserRouter } iz "react-router-dom";
import { useState } iz "react";
// Drugi uvozni izpiski
funkcija App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const prijava = () => {
 setisLoggedIn (true);
 };
 const odjava = () => {
 setisLoggedIn (false);
 };
 vrnitev (


 {isLoggedIn? (
Odjava
 ): (
Vpiši se
 )}



 );
}
izvoz privzete aplikacije;

Tukaj sledite statusu prijave uporabnika, ki uporablja stanje. Imate dva gumba, gumb za prijavo in gumb za odjavo. Ti gumbi so upodobljeni po vrsti, odvisno od tega, ali je uporabnik prijavljen ali ne.

Če je uporabnik odjavljen, se prikaže gumb za prijavo. S klikom nanjo se bo sprožila prijavna funkcija, ki bo posodobila jePrijavljen stanje na true in nato prikaz od prijave do gumba za odjavo.

Povezano: Kaj je avtentikacija uporabnika in kako deluje?

Zaščita zasebnih komponent

Za zaščito poti morajo imeti zasebne komponente dostop tudi do jePrijavljen vrednost. To lahko storite tako, da ustvarite novo komponento, ki sprejema jePrijavljen država kot rekvizit in zasebna komponenta kot otrok.

Na primer, če je vaša nova komponenta imenovana "Zaščitena", bi upodobili zasebno komponento, kot je ta.

Zaščitena komponenta bo preverila, ali jePrijavljen je resnična ali napačna. Če je res, bo šlo naprej in vrnilo zasebno komponento. Če je napačna, bo uporabnika preusmerila na stran, kjer se lahko prijavi.

Preberite več o drugih načinih, ki jih lahko uporabite za upodabljanje komponente glede na pogoje od tega članka naprej pogojno upodabljanje v Reactu.

V svoji aplikaciji ustvarite Protected.js.

uvoz { Navigate } iz "react-router-dom";
const Zaščiteno = ({ isLoggedIn, otroci }) => {
 če (!isLoggedIn) {
 vrnitev ;
 }
 vrniti otroke;
};
izvoz privzeto Zaščiteno;

V tej komponenti se stavek if uporablja za preverjanje, ali je uporabnik overjen. Če niso, Navigacija od odziv-usmerjevalnik-dom jih preusmeri na domačo stran. Če pa je uporabnik overjen, je podrejena komponenta upodobljena.

Uporaba Protected.js v App.js spremenite Profil pot strani.

 pot="/profil"
 element={



 }
/>

App.js bi moral izgledati takole.

import { Routes, Route, BrowserRouter } iz "react-router-dom";
import { useState } iz "react";
uvozi Navbar iz "./Navbar";
uvoz Zaščiten pred "./Protected";
uvoz domov iz "./Home";
uvozi About iz "./About";
uvozi profil iz "./Profil";
funkcija App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const prijava = () => {
 setisLoggedIn (true);
 };
 const odjava = () => {
 setisLoggedIn (false);
 };
 vrnitev (




 {isLoggedIn? (
Odjava
 ): (
Vpiši se
 )}

} />
 element={



 }
 />
} />





 );
}
izvoz privzete aplikacije;

To je vse pri ustvarjanju zaščitenih poti. Zdaj lahko dostopate do strani profila samo, če ste prijavljeni. Če se poskusite pomakniti na stran Profil brez prijave, boste preusmerjeni na domačo stran.

Nadzor dostopa na podlagi vlog

Ta vadnica vam je pokazala, kako lahko nepooblaščenim uporabnikom omejite dostop do strani v aplikaciji React. V nekaterih primerih boste morda morali iti še dlje in omejiti uporabnike glede na njihove vloge. Na primer, lahko imate stran, recimo stran za analitiko, ki omogoča dostop samo skrbnikom. Tukaj boste morali v zaščiteno komponento dodati logiko, ki preverja, ali uporabnik izpolnjuje zahtevane pogoje.

Kako implementirati pogojno upodabljanje v React.js (s primeri)

Pogojno upodabljanje je koristen način za izboljšanje vaše aplikacije. Tukaj je izbor načinov uporabe.

Preberite Naprej

O avtorju