Trasy chronione to trasy, które przyznają dostęp tylko autoryzowanym użytkownikom. Oznacza to, że użytkownicy muszą najpierw spełnić określone warunki, zanim uzyskają dostęp do określonej trasy. Na przykład Twoja aplikacja może wymagać, aby tylko zalogowani użytkownicy mogli odwiedzać stronę pulpitu nawigacyjnego.

W tym samouczku dowiesz się, jak tworzyć chronione trasy w aplikacji React.

Zauważ, że będziesz używać React Router v6, który różni się nieco od poprzednich wersji.

Pierwsze kroki

Aby rozpocząć, użyj aplikacja-stwórz-reaguj aby załadować prostą aplikację React.

npx utwórz-reaguj-aplikację chroń-trasy-reaguj

Przejdź do folderu, który właśnie został utworzony i uruchom aplikację.

cd protect-routes-react
początek npm

Otwórz folder aplikacji za pomocą preferowanego edytora tekstu i wyczyść go. Twój app.js powinien wyglądać tak.

funkcja App() {
 powrót ;
}
eksportuj domyślną aplikację;

Jesteś teraz gotowy do skonfigurowania tras.

Związane z: Jak stworzyć swoją pierwszą aplikację React z JavaScript?

Konfigurowanie routera React

Użyjesz React Router, aby skonfigurować nawigację dla swojej aplikacji.

zainstalować React-router-dom.

npm zainstaluj reak-router-dom

W przypadku tej aplikacji będziesz mieć trzy główne strony:

• Strona główna (strona docelowa).
• Strona profilu (chroniona, więc dostęp mają tylko zalogowani użytkownicy).
• O stronie (publiczna, aby każdy miał do niej dostęp).

w Navbar.js, Użyj Połączyć składnik z React-router-dom aby utworzyć łącza nawigacyjne do różnych ścieżek.

const { Link } = require("react-router-dom");
stały pasek nawigacyjny = () => {
 powrót (

 );
};
eksportuj domyślny pasek nawigacyjny;

w app.js utwórz trasy pasujące do linków w menu nawigacji.

import { BrowserRouter jako Router, Trasy, Trasa } z "react-router-dom";
importuj pasek nawigacyjny z "./Navbar";
importuj Home z "./Home";
importuj Profil z "./Profil";
importuj Informacje z "./O";
funkcja App() {
 powrót (



} />
} />
} />


 );
}
eksportuj domyślną aplikację;

Teraz musisz utworzyć komponenty, do których się odwołujesz App.js.

w Home.js:

const Strona główna = () => {
 powrót 
Strona główna
;
};
eksportuj domyślny Dom;

w Profil.js

const Profil = () => {
 powrót 
Strona profilowa
;
};
eksportuj domyślny profil;

w O.js

const Informacje = () => {
 powrót 
O stronie
;
};
eksportuj domyślnie Informacje;

Tworzenie chronionych tras w React

Następnym krokiem jest tworzenie chronionych tras. ten Dom oraz o trasy są publiczne, co oznacza, że ​​każdy może uzyskać do nich dostęp, ale trasa profilu wymaga najpierw uwierzytelnienia użytkowników. Dlatego musisz stworzyć sposób na logowanie użytkowników.

Konfigurowanie fałszywego uwierzytelniania

Ponieważ nie jest to samouczek dotyczący uwierzytelniania, użyjesz React haczyk useState symulować system logowania.

w App.js, dodaj następujące.

importuj { Trasy, Trasy, BrowserRouter } z "react-router-dom";
importuj { useState } z "react";
// Inne importowane fragmenty
funkcja App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (prawda);
 };
 const wyloguj = () => {
 setisLoggedIn (fałsz);
 };
 powrót (


 {jest zalogowany? (
Wyloguj
 ): (
Zaloguj sie
 )}



 );
}
eksportuj domyślną aplikację;

Tutaj śledzisz status logowania użytkownika za pomocą stanu. Masz dwa przyciski, logowanie i przycisk wylogowania. Te przyciski są renderowane po kolei w zależności od tego, czy użytkownik jest zalogowany, czy nie.

Jeśli użytkownik jest wylogowany, wyświetlany jest przycisk logowania. Kliknięcie go uruchomi funkcję logowania, która zaktualizuje jest zalogowany stan na true i z kolei wyświetlanie od logowania do przycisku wylogowania.

Związane z: Co to jest uwierzytelnianie użytkownika i jak to działa?

Ochrona prywatnych komponentów

Aby chronić trasy, komponenty prywatne muszą mieć również dostęp do jest zalogowany wartość. Możesz to zrobić, tworząc nowy komponent, który akceptuje jest zalogowany stan jako rekwizyt i składnik prywatny jako dziecko.

Na przykład, jeśli twój nowy komponent ma nazwę „Chroniony”, wyrenderujesz taki komponent prywatny.

Chroniony składnik sprawdzi, czy jest zalogowany jest prawdą lub fałszem. Jeśli to prawda, zwróci składnik Private. Jeśli jest fałszywy, przekieruje użytkownika na stronę, na której może się zalogować.

Dowiedz się więcej o innych sposobach renderowania komponentu w zależności od warunków z tego artykułu na renderowanie warunkowe w React.

W swojej aplikacji utwórz Protected.js.

importuj { Nawiguj } z "react-router-dom";
const Protected = ({ isLoggedIn, dzieci }) => {
 jeśli (!isLoggedIn) {
 powrót ;
 }
 zwróć dzieci;
};
eksportuj domyślnie Chronione;

W tym komponencie instrukcja if służy do sprawdzania, czy użytkownik jest uwierzytelniony. Jeśli nie, Nawigować od React-router-dom przekierowuje ich na stronę główną. Jeśli jednak użytkownik zostanie uwierzytelniony, składnik podrzędny jest renderowany.

Stosowanie Protected.js w App.js zmodyfikuj Profil trasa strony.

 ścieżka = "/profil"
 element={



 }
/>

App.js powinien wyglądać tak.

importuj { Trasy, Trasy, BrowserRouter } z "react-router-dom";
importuj { useState } z "react";
importuj pasek nawigacyjny z "./Navbar";
import Chronione z "./Protected";
importuj Home z "./Home";
importuj Informacje z "./O";
importuj Profil z "./Profil";
funkcja App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (prawda);
 };
 const wyloguj = () => {
 setisLoggedIn (fałsz);
 };
 powrót (




 {jest zalogowany? (
Wyloguj
 ): (
Zaloguj sie
 )}

} />
 element={



 }
 />
} />





 );
}
eksportuj domyślną aplikację;

To tyle, jeśli chodzi o tworzenie chronionych tras. Możesz teraz uzyskać dostęp do strony profilu tylko wtedy, gdy jesteś zalogowany. Jeśli spróbujesz przejść do strony profilu bez logowania, zostaniesz przekierowany na stronę główną.

Kontrola dostępu oparta na rolach

Ten samouczek pokazał, jak możesz ograniczyć nieuwierzytelnionym użytkownikom dostęp do strony w aplikacji React. W niektórych przypadkach może być konieczne pójście dalej i ograniczenie użytkowników na podstawie ich ról. Na przykład możesz mieć stronę mówiącą o stronie analitycznej, która przyznaje dostęp tylko administratorom. Tutaj będziesz musiał dodać logikę w komponencie Protected, który sprawdza, czy użytkownik spełnia wymagane warunki.

Jak zaimplementować renderowanie warunkowe w React.js (z przykładami)

Renderowanie warunkowe to przydatny sposób na ulepszenie aplikacji. Oto kilka sposobów na jego wykorzystanie.

Czytaj dalej

O autorze