Защищенные маршруты — это маршруты, которые предоставляют доступ только авторизованным пользователям. Это означает, что пользователи должны сначала выполнить определенные условия, прежде чем получить доступ к этому конкретному маршруту. Например, ваше приложение может требовать, чтобы только зарегистрированные пользователи могли посещать страницу панели инструментов.

В этом руководстве вы узнаете, как создавать защищенные маршруты в приложении React.

Обратите внимание, что вы будете использовать React Router v6, который немного отличается от предыдущих версий.

Начиная

Для начала используйте создать-реагировать-приложение для загрузки простого приложения React.

npx создать-реагировать-приложение защитить-маршруты-реагировать

Перейдите в только что созданную папку и запустите приложение.

компакт-диск защиты-маршруты-реагируют
запуск нпм

Откройте папку приложения в предпочитаемом вами текстовом редакторе и очистите ее. Твой app.js должно выглядеть так.

приложение функции () {
 вернуть ;
}
экспортировать приложение по умолчанию;

Теперь вы готовы настроить маршруты.

Связанный: Как создать свое первое приложение React с помощью JavaScript

Настройка маршрутизатора React

Вы будете использовать React Router для настройки навигации для вашего приложения.

Установить реагировать-роутер-дом.

npm установить реакцию-маршрутизатор-дом

Для этого приложения у вас будет три основные страницы:

• Домашняя страница (посадочная страница).
• Страница профиля (защищена, поэтому доступ есть только у зарегистрированных пользователей).
• О странице (общедоступной, чтобы любой мог получить к ней доступ).

В Navbar.js, использовать Связь компонент из реакция-маршрутизатор-дом для создания навигационных ссылок на различные пути.

const {Link} = require("react-router-dom");
const Navbar = () => {
 вернуть (

 );
};
экспортировать панель навигации по умолчанию;

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

импортировать { BrowserRouter as Router, Routes, Route} из "react-router-dom";
импортировать навбар из "./навбар";
импортировать Home из "./Home";
импортировать Профиль из "./Профиль";
импортировать О из "./О";
приложение функции () {
 вернуть (



} />
} />
} />


 );
}
экспортировать приложение по умолчанию;

Теперь вам нужно создать компоненты, на которые вы ссылались в Аpp.js.

В Home.js:

const Главная = () => {
 вернуть 
Домашняя страница
;
};
экспортировать домашнюю страницу по умолчанию;

В Профиль.js

константный профиль = () => {
 вернуть 
Страница профиля
;
};
экспорт профиля по умолчанию;

В О.js

const О = () => {
 вернуть 
О странице
;
};
экспорт по умолчанию О программе;

Создание защищенных маршрутов в React

Далее идет создание защищенных маршрутов. То дома а также о маршруты являются общедоступными, что означает, что любой может получить к ним доступ, но профильный маршрут требует, чтобы пользователи сначала прошли аутентификацию. Следовательно, вам нужно создать способ входа пользователей.

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

Поскольку это не учебник по аутентификации, вы будете использовать React Хук useState для имитации системы входа в систему.

В Аpp.js, добавьте следующее.

импортировать {Routes, Route, BrowserRouter} из "react-router-dom";
импортировать {useState} из "реагировать";
// Другие параметры импорта
приложение функции () {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (истина);
 };
 const logOut = () => {
 setisLoggedIn (ложь);
 };
 вернуть (


 {Вошел в систему? (
Выйти
 ): (
Авторизоваться
 )}



 );
}
экспортировать приложение по умолчанию;

Здесь вы отслеживаете статус входа пользователя, используя состояние. У вас есть две кнопки, вход в систему и кнопка выхода. Эти кнопки отображаются по очереди в зависимости от того, вошел ли пользователь в систему или нет.

Если пользователь вышел из системы, отображается кнопка входа. Нажатие на нее вызовет функцию входа в систему, которая обновит isLoggedIn state на true и, в свою очередь, отображение от входа в систему до кнопки выхода из системы.

Связанный: Что такое аутентификация пользователя и как она работает?

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

Для защиты маршрутов частные компоненты также должны иметь доступ к isLoggedIn стоимость. Вы можете сделать это, создав новый компонент, который принимает isLoggedIn состояние в качестве реквизита и частный компонент в качестве дочернего элемента.

Например, если ваш новый компонент называется «Защищенный», вы должны отображать частный компонент следующим образом.

Защищенный компонент проверит, isLoggedIn истинно или ложно. Если это правда, он продолжит работу и вернет частный компонент. Если это ложь, он перенаправит пользователя на страницу, где он может войти в систему.

Узнайте больше о других способах рендеринга компонента в зависимости от условий из этой статьи на условный рендеринг в React.

В своем приложении создайте Защищенный.js.

импортировать {Navigate} из "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
 если (! isLoggedIn) {
 вернуть ;
 }
 вернуть детей;
};
экспортировать по умолчанию Защищено;

В этом компоненте оператор if используется для проверки подлинности пользователя. Если это не так, Навигация от реакция-маршрутизатор-дом перенаправляет их на главную страницу. Однако, если пользователь аутентифицирован, отображается дочерний компонент.

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

 путь="/профиль"
 элемент={



 }
/>

App.js должно выглядеть так.

импортировать {Routes, Route, BrowserRouter} из "react-router-dom";
импортировать {useState} из "реагировать";
импортировать навбар из "./навбар";
импорт Защищено от "./Защищено";
импортировать Home из "./Home";
импортировать О из "./О";
импортировать Профиль из "./Профиль";
приложение функции () {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (истина);
 };
 const logOut = () => {
 setisLoggedIn (ложь);
 };
 вернуть (




 {Вошел в систему? (
Выйти
 ): (
Авторизоваться
 )}

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



 }
 />
} />





 );
}
экспортировать приложение по умолчанию;

Вот и все о создании защищенных маршрутов. Теперь вы можете получить доступ к странице профиля, только если вы вошли в систему. Если вы попытаетесь перейти на страницу профиля без входа в систему, вы будете перенаправлены на домашнюю страницу.

Управление доступом на основе ролей

В этом руководстве показано, как вы можете запретить неавторизованным пользователям доступ к странице в приложении React. В некоторых случаях вам может понадобиться пойти еще дальше и ограничить пользователей на основе их ролей. Например, у вас может быть страница, скажем, страница аналитики, которая предоставляет доступ только администраторам. Здесь вам нужно будет добавить в компонент Protected логику, которая проверяет, соответствует ли пользователь требуемым условиям.

Как реализовать условный рендеринг в React.js (с примерами)

Условный рендеринг — это полезный способ улучшить ваше приложение. Вот несколько способов его использования.

Читать далее

Об авторе