Внедрите авторизацию как профессионал в свой проект React.
React - безусловно, самый популярный фреймворк JavaScript за последнее время. Но если вы работали с React в любом масштабе или в своем хобби-проекте, у него не так много встроенных функций, которые могут быть как хорошими, так и плохими.
Проблемное пространство
Безопасность - большая проблема для большого количества компаний. Авторизация и аутентификация обязательны для всех реальных проектов. А Route Guard помогает нам управлять уровнем авторизации микса.
Решение
Использование Route Guards - одна из моих любимых функций в Angular, где вы можете иметь гораздо более точный контроль над вашими маршрутами и различными доступными функциями, которые срабатывают в зависимости от различных условий.
Чтобы узнать больше о Route Guards в Angular, вы можете посетить эту ссылку.
Мы постараемся реализовать те же функции в React.
Что такое Route Guard?
Route Guard - это механизм, позволяющий лучше контролировать маршруты, доступные в вашем приложении. Это могут быть простые разрешения меню, которые работают с активацией или деактивацией маршрута.
Почему нам нужны Route Guards в нашем приложении, потому что это одна очень важная потребность - мы не хотим, чтобы у всех наших пользователей были одинаковые привилегии для всех ресурсов приложения.
Одним из примеров является ваше приложение, используемое для управления переводом финансов, где обычный пользователь может запрашивать различные финансовые услуги, а администратор может это одобрить.
Для этого, чтобы скрыть и контролировать список всех полученных запросов, мы должны ограничить маршрут только пользователем с правами администратора, и никто другой не должен иметь доступ к этому маршруту.
Начало работы с кодом:
Инструменты, которые мы будем использовать:
"react-router-dom": "^5.2.0"
Базовое приложение
RootGuard
В этом Guard мы можем импортировать все различные охранники и обернуть дочерний реквизит их конкретной реализацией и сценарием использования.
AuthGuard
Это Guard, который обрабатывает разрешения для каждого маршрута.Вы можете взять разрешение меню из любого из лучших практик безопасности и сохранить его таким образом, чтобы изменение разрешений аннулировало JSON и приносило из API, или вы можете зашифровать и сохранить его. и используя ключ, присутствующий в .env, вы можете расшифровать токен.
Как части работают вместе?
Чуть ниже реализации маршрутизатора внутри нашего приложения мы добавили корневую защиту, которая получает все внутреннее содержимое приложения как дочерние элементы.
Дочерние элементы - это особый тип реквизита в реакции, который используется для получения всех внутренних элементов этого тега, который он оборачивает. Это позволяет нам выполнять определенные операции и иметь общий стиль для нашего приложения независимо от внутреннего содержимого.
Root Guard содержит нашу самую первую защиту AuthGuard, которая проверяет разрешения этого приложения и на основе любой логики, которая требуется вашему приложению, вы можете контролировать, какой маршрут должен активироваться.
У нас есть useEffect, отслеживающий имя нашего местоположения, имя местоположения - это не что иное, как маршрут, который в настоящее время активирован, и всякий раз, когда он изменяется, охранник срабатывает снова.
Наша текущая реализация проверяет всякий раз, когда запрашиваемый маршрут является списком, и у пользователя нет разрешения, он перенаправляет их на домашнюю страницу, вы также можете перенаправить их на другой неавторизованный, в зависимости от того, как вы считаете, что для вашего приложения лучше.
Теперь я могу посещать все страницы, кроме списка, и всякий раз, когда я пытаюсь каким-то образом, могу использовать кнопку или напрямую вставлять URL-адрес или какую-то лазейку, о которой я не знаю, каким-то образом она перенаправит меня обратно
Совет
Я рекомендую, чтобы ваши API знали о разрешениях и авторизации вошедшего в систему пользователя с помощью какого-либо промежуточного программного обеспечения, чтобы вы не получили нежелательных изменений в ваших системных ресурсах.
Следите за новыми интересными статьями. Мир!
Больше контента на plainenglish.io
