Защитените маршрути са тези маршрути, които предоставят достъп само на оторизирани потребители. Това означава, че потребителите трябва първо да изпълнят определени условия, преди да получат достъп до този конкретен маршрут. Например, вашето приложение може да изисква само влезли потребители да могат да посещават страницата на таблото за управление.

В този урок ще научите как създавате защитени маршрути в приложение React.

Имайте предвид, че ще използвате React Router v6, който е малко по-различен от предишните версии.

Приготвяме се да започнем

За да започнете, използвайте създаване-реагиране-приложение за да стартирате просто приложение React.

npx create-react-app protect-routes-react

Придвижете се до току-що създадената папка и стартирайте приложението си.

CD защита-маршрути-реагира
npm старт

Отворете папката на приложението си с предпочитания от вас текстов редактор и я почистете. Вашият app.js трябва да изглежда така.

функция App() {
 връщане ;
}
експортиране на приложение по подразбиране;

Вече сте готови да настроите маршрутите.

Свързани: Как да създадете първото си React приложение с JavaScript

Настройка на React Router

Ще използвате React Router, за да настроите навигацията за вашето приложение.

Инсталирай реакция-рутер-дом.

npm инсталирайте реакция-рутер-дом

За това приложение ще имате три основни страници:

• Начална страница (целевата страница).
• Страница с профил (защитена, така че само влезли потребители имат достъп).
• Информация за страницата (публична, така че всеки да има достъп до нея).

В Navbar.js, използвай Връзка компонент от реакция-рутер-дом за създаване на навигационни връзки към различни пътища.

const { Link } = require("react-router-dom");
const Navbar = () => {
 връщане (

 );
};
експортиране по подразбиране Navbar;

В app.js създайте маршрути, съответстващи на връзките в менюто за навигация.

import { BrowserRouter като Router, Routes, Route } от "react-router-dom";
импортирайте Navbar от "./Navbar";
импортирайте Начало от "./Home";
импортирайте профил от "./Profile";
импортирайте About от "./About";
функция App() {
 връщане (



} />
} />
} />


 );
}
експортиране на приложение по подразбиране;

Сега трябва да създадете компонентите, в които сте посочили Аpp.js.

В Home.js:

const Начало = () => {
 връщане 
Начална страница
;
};
експортиране по подразбиране Начало;

В Profile.js

const профил = () => {
 връщане 
Профилна страница
;
};
експортиране на профил по подразбиране;

В About.js

const Относно = () => {
 връщане 
За страницата
;
};
експортиране по подразбиране About;

Създаване на защитени маршрути в React

Следващото е създаване на защитени маршрути. В У дома и относно маршрутите са публични, което означава, че всеки има достъп до тях, но маршрутът на профила изисква първо да бъдат удостоверени потребителите. Следователно, трябва да създадете начин за влизане на потребителите.

Настройка на фалшива автентификация

Тъй като това не е урок за удостоверяване, ще използвате React useState hook за симулиране на система за влизане.

В Аpp.js, добавете следното.

import { Routes, Route, BrowserRouter } от "react-router-dom";
import { useState } от "react";
// Други данни за импортиране
функция App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (вярно);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 връщане (


 {isLoggedIn? (
Излез от профила си
 ): (
Влизам
 )}



 );
}
експортиране на приложение по подразбиране;

Тук проследявате състоянието на влизане на потребителя, използващ състоянието. Имате два бутона, бутон за влизане и бутон за излизане. Тези бутони се изобразяват на свой ред в зависимост от това дали потребителят е влязъл или не.

Ако потребителят е излязъл, се показва бутонът за влизане. Щракването върху него ще задейства функцията за влизане, която ще актуализира isLoggedIn състоянието на true и на свой ред показване от влизане до бутона за излизане.

Свързани: Какво представлява удостоверяването на потребителя и как работи?

Защита на частни компоненти

За да защитят маршрутите, частните компоненти също трябва да имат достъп до isLoggedIn стойност. Можете да направите това, като създадете нов компонент, който приема isLoggedIn state като опора и частния компонент като дете.

Например, ако вашият нов компонент е наречен "Protected", вие ще изобразите частен компонент като този.

Защитеният компонент ще провери дали isLoggedIn е вярно или невярно. Ако е вярно, ще продължи и ще върне частния компонент. Ако е невярно, той ще пренасочи потребителя към страница, където може да влезе.

Научете повече за други начини, които можете да използвате за изобразяване на компонент в зависимост от условията от тази статия нататък условно изобразяване в React.

Във вашето приложение създайте Protected.js.

import { Navigate } от "react-router-dom";
const Защитено = ({ isLoggedIn, деца }) => {
 if (!isLoggedIn) {
 връщане ;
 }
 връщане на деца;
};
експорт по подразбиране Защитено;

В този компонент операторът if се използва за проверка дали потребителят е удостоверен. ако не са, Навигирайте от реакция-рутер-дом ги пренасочва към началната страница. Въпреки това, ако потребителят е удостоверен, дъщерният компонент се изобразява.

Използвайте Protected.js в Аpp.js модифицирайте Профил маршрут на страницата.

 път = "/профил"
 елемент={



 }
/>

App.js трябва да изглежда така.

import { Routes, Route, BrowserRouter } от "react-router-dom";
import { useState } от "react";
импортирайте Navbar от "./Navbar";
импорт Защитено от "./Protected";
импортирайте Начало от "./Home";
импортирайте About от "./About";
импортирайте профил от "./Profile";
функция App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (вярно);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 връщане (




 {isLoggedIn? (
Излез от профила си
 ): (
Влизам
 )}

} />
 елемент={



 }
 />
} />





 );
}
експортиране на приложение по подразбиране;

Това е всичко при създаването на защитени маршрути. Вече имате достъп до страницата на профила само ако сте влезли. Ако се опитате да отидете до страницата на профила, без да влизате, ще бъдете пренасочени към началната страница.

Контрол на достъпа, базиран на роли

Този урок ви показа как можете да ограничите достъпа на неудостоверени потребители до страница в приложение React. В някои случаи може да се наложи да отидете още по-далеч и да ограничите потребителите въз основа на техните роли. Например, можете да имате страница, например страница за анализ, която предоставя достъп само на администратори. Тук ще трябва да добавите логика в защитения компонент, който проверява дали даден потребител отговаря на необходимите условия.

Как да внедрите условно изобразяване в React.js (с примери)

Условното изобразяване е полезен начин да подобрите приложението си. Ето селекция от начини да го използвате.

Прочетете Следващото

За автора