Всем привет, давно не было последней статьи. Сегодня мы научимся создавать приватную область с библиотекой React Router Dom.

Я не собираюсь рассказывать вам все о React Router Dom с нуля, но вы поймете, как мы можем создать приватную область, которую могут видеть только зарегистрированные пользователи.

Давай начнем.

Готовим нашу структуру папок.

Как вы можете догадаться, сначала нам нужно установить React Router Dom.

yarn add react-router-dom

or

npm i react-router-dom

Поскольку мы начали использовать React Router Dom, нам нужно обернуть наш родительский компонент в Browser Router. Перейдите к файлу «index.js» и оберните ‹App/› с помощью ‹BrowserRouter›. Вы должны быть уверены, что пакет React Router Dom был импортирован.

Теперь нам разрешено использовать все функции, которые React Router Dom предоставил в наших родительских компонентах и его будущих дочерних компонентах.

Еще одна вещь, которую нужно сделать для использования библиотеки. Давайте изменим файл «App.js».

Если вы зашли так далеко, это здорово, что вы теперь используете React Router Dom, но мы еще не используем его функции. Давайте посмотрим на функции, которые можно использовать для нашего конкретного проекта.

Нам нужно скрыть домашнюю страницу ака. «панель управления» в данном случае и перенаправлять незарегистрированных пользователей обратно на страницу/форму «Вход», которую мы создали.

Начнем с создания наших «страниц».

Создайте папку с именем «pages» в «src» и создайте следующие файлы.

Затем нам нужно создать папку «router» внутри нашей папки src и создать в ней следующие файлы.

  • Файл AppRouter будет содержать все маршруты, которые мы можем использовать в качестве страниц.
  • Файл PrivateRoute содержит логику приватности страницы или маршрута.
  • Файл PublicRoute содержит логику всех остальных страниц или маршрутов, видимых всем.

Внутри папки AppRouter мы создадим «Маршруты» для нашего проекта, что означает, что мы создаем многостраничное поведение приложения. Обычно приложения React — это SPA, но с помощью React Router Dom мы можем создавать многостраничные приложения или, по крайней мере, приложения, ведущие себя подобным образом.

Давайте напишем следующие строки внутри нашего AppRouter.

Вы можете изменить их в зависимости от ваших потребностей.

В последней версии React Router Dom мы оборачивали наши маршруты ключевым словом «Switch». Но теперь он использует ключевое слово «Маршруты».

Оберните свои маршруты с помощью ключевого слова «Routes» и напишите свои маршруты с помощью ключевого слова «Route», указав им путь и элемент, который будет отображаться как страница. элемент/компонент.

Вы можете заметить, что я импортировал функцию «Навигация» для перенаправления. Если кто-либо войдет в систему и попытается перейти в корень («/»), он будет перенаправлен на «/dashboard». Таким образом, URL-адрес «/» теперь будет «/dashboard» для Главной страницы.

Так как моя домашняя страница является частной страницей, которую не может увидеть публика, мы обернем ее другим «маршрутом» с атрибутом элемента, содержащим ‹PrivateRoute /›. и вложите страницу 'Маршруты', которую мы хотим сделать частной, в этом случае ее ‹Главная/› страница.

И, наконец, мы собираемся обернуть наши общедоступные страницы «Маршрутом» с атрибутом элемента, содержащим ‹PublicRoute /›, и вложить страницу «Маршруты», которую мы хотим сделать общедоступной, в этом случае это Страница ‹Вход/›.

Теперь мы собираемся создать логику PrivateRoute. Перейдите к файлу PrivateRoute.jsx, который мы создали ранее, и напишите в нем следующие строки.

Здесь мы можем увидеть некоторую базовую логику. Мы создаем функцию под названием useAuth, чтобы проверить, вошел ли пользователь в систему или нет, просматривая LocalStorage для любых фиктивных данных входа, которые имеют ключ «user». (Он действует как поддельный токен аутентификации.) Если он есть, он возвращает true, в противном случае возвращает false.

И под нашей функцией аутентификации мы создаем компонент с именем PrivateRoute, который мы собираемся использовать для обертывания наших вложенных маршрутов.

В этом компоненте мы вызываем функцию useAuth и ищем возвращаемое логическое значение, и если оно истинно, возвращаем ‹Outlet/›, если оно ложно, не разрешаем доступ к Домашней странице и снова перенаправить пользователя на страницу '/login'. Итак, вы спрашиваете, что такое ‹Outlet/›. Это очень просто. Это потомки PrivateRoute, сокращенный способ вызова того, что вложено в маршрут ‹PrivateRoute/›, который мы установили в нашем ‹AppRouter/›. Давайте еще раз взглянем на наш ‹AppRouter/›, чтобы лучше понять концепцию.

Я думаю, теперь у вас есть четкое представление о том, что такое Outlet в react-router-dom. Просто, верно?

Далее мы создаем компонент ‹Home /›. В папке страницы. Внутри ранее созданного файла «Home.jsx» напишите следующие строки. Вы можете создать домашнюю страницу как угодно, это всего лишь пример страницы.

Давайте также создадим нашу страницу входа и форму входа.

Внутри файла Login.jsx в папке pages добавьте следующие строки.

Как видите, у нас также есть компонент LoginForm, который мы импортируем на страницу входа.

В нашей папке src создайте папку с именем components и внутри нее создайте другую папку с именем компонента, в нашем случае это LoginForm, затем создайте файл с именем LoginForm.jsx внутри него.

Добавьте следующие строки в файл LoginForm.jsx.

У нас есть функция входа в систему внутри нашего компонента LoginForm, которая отправляет фиктивные данные в LocalStorage каждый раз при отправке формы входа. В нашем случае входные значения не важны, они могут быть любыми. Наша базовая функция входа в систему отправит ключ user и значение test в LocalStorage и перейдет к корневому URL-адресу. За кулисами он проверяет, есть ли фиктивные данные внутри LocalStorage или нет, которые мы написали логику ранее внутри нашего PrivateRoute.jsx.

В нашем случае, если вы хотите создать функцию выхода, это может быть примерно так. Вы можете использовать его по ссылке в компоненте Navbar или в нужном месте.

Осталось последнее, что нужно сделать в конце нашего руководства по базовому частному маршрутизатору. Мы собираемся создать общедоступный маршрут, который будет виден каждому пользователю.

Мы создали наш PublicRoute в AppRouter и вложили нашу общедоступную страницу в его дочерние элементы.

В папке «router» и внутри созданного нами файла PublicRoute.jsx добавьте следующие строки. Он очень похож на файл PrivateRoute.jsx, но с небольшим отличием.

На этот раз в логике нашего компонента PublicRoute последняя строка отличается.

Теперь он вызывает функцию useAuth и, если она не истинна, всегда перенаправляет пользователя обратно на ‹Outlet/›, в нашем случае это наш дочерний маршрут ‹Login/› компонент страницы.

На этом последняя часть нашего руководства подходит к концу. Надеюсь, вы усвоили основные принципы создания приватных маршрутов внутри react-router-dom.

До встречи в других статьях.