Реакция отличная! Маршрутизаторы React легко подключить для базовой маршрутизации. Но для практического использования это не типичные маршруты /home, /nav, /login. Не так ли? Маршруты — это входные шлюзы, а шлюзы нуждаются в защите в зависимости от их назначения.
Один из распространенных вопросов, которые задают при маршрутизации через переполнение стека, который я заметил в эти дни, касается ограждения маршрутизации. Давайте перейдем к быстрой и простой реализации.
Предположим, мне нужно создать домашнюю страницу для моей книги-пустышки (надеюсь, вы простите мне убийство UX для этого примера. RIP!). Я не хочу, чтобы моя страница направлялась на страницу профиля, пока я не войду в систему. Как я могу это сделать?
Давайте быстро пройдемся по нашему приложению, в котором параметры входа и выхода имитируются простыми обновлениями состояния.
Обратите внимание на AuthenticationContext, в котором хранится состояние аутентификации. Прямо сейчас профиль отображается независимо от статуса аутентификации, в данном случае без нажатия кнопки «Войти».
Как мы защищаем этот маршрут? Подойдет простая оболочка, которая проверяет аутентификацию, возвращающую маршрутизатор или перенаправления (auth-route.js ниже).
Теперь все, что вам нужно сделать, это заменить Route профиля на наш недавно созданный AuthenticatedRoute. Они используют тот же реквизит, что и маршрут, и, если они не аутентифицированы, вы перенаправляетесь на домашнюю страницу. Это все, что вам нужно. Конечно, проверка аутентификации не может быть проверкой состояния, но ее можно заменить вашим механизмом аутентификации. Теперь с ограждением, теперь оно должно направить вас на страницу профиля фиктивной книги, если вы вошли в систему.
Если вам нужен интерактивный пример, у меня есть один в final-code(codesandbox) с красивым пользовательским интерфейсом ;)
