Неделя 6 GSoC 2020 — Второй этап кодирования с AnitaB.Org
Нет… этот блог не о Covid19. Но, пожалуйста, ПРИНИМАЙТЕ СЕРЬЕЗНО СООБЩЕНИЕ НА КАРТИНКЕ ВЫШЕ. Защитите себя, семью и других от Covid19, надевая маску, когда выходите на улицу, и держите руки в чистоте, часто дезинфицируя их…. 🙏
Хорошо, а теперь приступим к делу.
Я собираюсь поделиться тем, что я узнал на этой неделе о разработке внешнего интерфейса BridgeInTech, а именно о том, как защитить частные страницы в веб-приложении Reactjs. Эта защищенная страница используется с функцией входа пользователя.
Это будет быстрый блог, так как, вероятно, будет проще и понятнее смотреть на сам код, чем читать мои объяснения 😁. Я все же попытаюсь дать краткое объяснение.
Что я узнал на этой неделе…
Эта задача была достигнута с помощью create-react-app с добавленными зависимостями react-bootstrap, react-router-dom и js-cookie.
Здесь cookies используются для хранения имени пользователя и токена, полученных от пользователя, введенного в форму входа, и отправки запроса POST/login. Затем они используются с React Context для передачи на страницы, которым требуется токен пользователя для доступа к этой странице (так называемая защищенная страница). useEffect помогает установить состояние аутентификации в зависимости от того, выбирает ли пользователь login или logout из приложения.
На панели навигации useContext с состоянием аутентификации (isAuth) используется для переключения между пунктами меню Register/Login или Logout.
Ниже Navigation.js.
Route.js используется в качестве первого фильтра, который помогает направить следующий шаг, на который должно перейти приложение, когда пользователь выбирает любое меню из Navigation.js. Здесь страница, которая должна быть доступна только после аутентификации пользователя, заключена в <ProtectedRoute /> .
Ниже приведен файл Route.js:
Наконец, ProtectedRoute, защищающий страницу, помогает определить, отображать ли защищенную страницу или, если пользователь не аутентифицирован, перенаправить пользователя обратно на страницу Home.
В порядке. Вот и все. Довольно короткий блог, не правда ли? Надеюсь, это поможет всем, кто также ищет несколько советов по аналогичной функциональности 😉.
До следующей недели…… 👋.
Ссылка на профиль:
