Zaštićene rute su one rute koje daju pristup samo ovlaštenim korisnicima. To znači da korisnici prvo moraju ispuniti određene uvjete prije pristupa toj određenoj ruti. Na primjer, vaša aplikacija može zahtijevati da samo prijavljeni korisnici mogu posjetiti stranicu nadzorne ploče.

U ovom vodiču naučit ćete kako kreirate zaštićene rute u React aplikaciji.

Imajte na umu da ćete koristiti React Router v6, koji se malo razlikuje od prethodnih verzija.

Početak rada

Za početak upotrijebite stvori-reagiraj-aplikaciju za pokretanje jednostavne React aplikacije.

npx create-react-app protect-routes-react

Dođite do mape koja je upravo stvorena i pokrenite svoju aplikaciju.

CD zaštita-rute-reagiranje
npm start

Otvorite mapu aplikacije s željenim uređivačem teksta i očistite je. Vaš app.js trebao izgledati ovako.

funkcija App() {
 povratak ;
}
izvoz zadane aplikacije;

Sada ste spremni za postavljanje ruta.

Povezano: Kako stvoriti svoju prvu React aplikaciju s JavaScriptom

Postavljanje React usmjerivača

Koristit ćete React Router za postavljanje navigacije za svoju aplikaciju.

Instalirati reagirati-ruter-dom.

npm install react-router-dom

Za ovu aplikaciju imat ćete tri glavne stranice:

• Početna stranica (odredišna stranica).
• Stranica profila (zaštićena, tako da pristup imaju samo prijavljeni korisnici).
• O stranici (javna tako da joj svatko može pristupiti).

U Navbar.js, koristiti Veza komponenta iz reagirati-ruter-dom za stvaranje navigacijskih veza na različite putove.

const { Veza } = require("react-router-dom");
const Navbar = () => {
 vratiti (

 );
};
izvoz zadane Navbar;

U app.js kreirajte rute koje odgovaraju poveznicama u navigacijskom izborniku.

import { BrowserRouter as Router, Routes, Route } iz "react-router-dom";
uvoz Navbar iz "./Navbar";
import Home from "./Home";
uvoz profila iz "./Profil";
import About from "./About";
funkcija App() {
 vratiti (



} />
} />
} />


 );
}
izvoz zadane aplikacije;

Sada morate stvoriti komponente u kojima ste referencirali App.js.

U Home.js:

const Početna = () => {
 povratak 
Početna stranica
;
};
izvoz zadani Početna;

U Profile.js

const Profil = () => {
 povratak 
Stranica profila
;
};
izvoz zadanog profila;

U About.js

const O = () => {
 povratak 
O stranici
;
};
izvoz zadano O;

Kreiranje zaštićenih ruta u Reactu

Sljedeće je stvaranje zaštićenih ruta. The Dom i oko rute su javne, što znači da im svatko može pristupiti, ali ruta profila zahtijeva da se korisnici prvo provjere autentičnosti. Stoga morate stvoriti način za prijavu korisnika.

Postavljanje lažne provjere autentičnosti

Budući da ovo nije vodič za autentifikaciju, koristit ćete React useState hook za simulaciju sustava za prijavu.

U App.js, dodajte sljedeće.

import { Routes, Route, BrowserRouter } iz "react-router-dom";
import { useState } iz "react";
// Ostale uvozne izjave
funkcija App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const odjava = () => {
 setisLoggedIn (lažno);
 };
 vratiti (


 {isLoggedIn? (
Odjavite se
 ): (
Prijaviti se
 )}



 );
}
izvoz zadane aplikacije;

Ovdje pratite status prijave korisnika koji koristi stanje. Imate dva gumba, gumb za prijavu i gumb za odjavu. Ovi se gumbi prikazuju redom ovisno o tome je li korisnik prijavljen ili ne.

Ako je korisnik odjavljen, prikazuje se gumb za prijavu. Klikom na nju pokrenut će se funkcija prijave koja će ažurirati isLoggedIn stanje na true i zauzvrat prikaz od prijave do gumba za odjavu.

Povezano: Što je autentifikacija korisnika i kako funkcionira?

Zaštita privatnih komponenti

Kako bi zaštitile rute, privatne komponente također moraju imati pristup isLoggedIn vrijednost. To možete učiniti stvaranjem nove komponente koja prihvaća isLoggedIn država kao rekvizit i privatna komponenta kao dijete.

Na primjer, ako je vaša nova komponenta nazvana "Zaštićena", renderirali biste privatnu komponentu poput ove.

Zaštićena komponenta će provjeriti je li isLoggedIn je istinita ili lažna. Ako je istina, nastavit će i vratiti Privatnu komponentu. Ako je lažna, preusmjerit će korisnika na stranicu na kojoj se mogu prijaviti.

Saznajte više o drugim načinima na koje možete koristiti za generiranje komponente ovisno o uvjetima od ovog članka nadalje uvjetno renderiranje u Reactu.

U svojoj aplikaciji kreirajte Protected.js.

import { Navigate } from "react-router-dom";
const Zaštićeno = ({ isLoggedIn, djeca }) => {
 if (!isLoggedIn) {
 povratak ;
 }
 vratiti djecu;
};
izvoz zadano Zaštićeno;

U ovoj komponenti, if izraz se koristi za provjeru je li korisnik autentificiran. ako nisu, Krećite se iz reagirati-ruter-dom preusmjerava ih na početnu stranicu. Međutim, ako je korisnik autentificiran, generira se podređena komponenta.

Koristiti Protected.js u App.js modificirati Profil ruta stranice.

 put="/profil"
 element={



 }
/>

App.js trebao izgledati ovako.

import { Routes, Route, BrowserRouter } iz "react-router-dom";
import { useState } iz "react";
uvoz Navbar iz "./Navbar";
uvoz Zaštićeno od "./Protected";
import Home from "./Home";
import About from "./About";
uvoz profila iz "./Profil";
funkcija App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const odjava = () => {
 setisLoggedIn (lažno);
 };
 vratiti (




 {isLoggedIn? (
Odjavite se
 ): (
Prijaviti se
 )}

} />
 element={



 }
 />
} />





 );
}
izvoz zadane aplikacije;

To je sve na stvaranju zaštićenih ruta. Sada možete pristupiti stranici profila samo ako ste prijavljeni. Ako pokušate prijeći na stranicu profila bez prijave, bit ćete preusmjereni na početnu stranicu.

Kontrola pristupa temeljena na ulogama

Ovaj vam je vodič pokazao kako možete ograničiti neautoriziranim korisnicima pristup stranici u React aplikaciji. U nekim slučajevima možda ćete morati ići još dalje i ograničiti korisnike na temelju njihovih uloga. Na primjer, možete imati stranicu, recimo stranicu za analizu koja daje pristup samo administratorima. Ovdje ćete morati dodati logiku u zaštićenu komponentu koja provjerava ispunjava li korisnik tražene uvjete.

Kako implementirati uvjetno renderiranje u React.js (s primjerima)

Uvjetno renderiranje koristan je način poboljšanja vaše aplikacije. Ovdje je izbor načina za korištenje.

Pročitajte dalje

O autoru