И эти 5 шагов охватывают все способы аутентификации, которые вы хотите добавить в Google, Facebook, Twitter или электронную почту.
Под капотом
Создание потока аутентификации во Frontend может быть довольно сложным, поскольку оно немного задерживается. Обновление Frontend, как только пользователь вышел из системы или вошел в систему, не так реально во времени. Мы часто не понимаем, какой способ предпочесть и какой может быть идеальным подходом для создания потока аутентификации во Frontend.
Объявить защищенные маршруты или незащищенные маршруты
Первый шаг - решить, какие маршруты или страницы во Frontend будут доступны без аутентификации, а какие заблокированы или защищены. Если вы используете приложение Create React, вам необходимо объявить их соответствующим образом с помощью пакета response-router. Но если вы используете Next JS, это становится легкой прогулкой. Я не буду вдаваться в подробности о том, как выполнить в Gatsby или Create React App.
Хранение токенов аутентификации
После того, как пользователь вошел в систему с помощью API, в большинстве случаев вы получите токен аутентификации. Сохраните этот токен аутентификации, так как он потребует дальнейших запросов к серверам. Хранение может быть довольно сложным, я предпочитаю хранить токены в файле cookie, вы также можете хранить токены в хранилище Redux.
Если вы хотите использовать redux вместо cookie, в этом случае используйте пакет redux-persist npm, чтобы сохранить хранилище даже после того, как пользователь закроет вкладку браузера.
Получение токенов
Получить токены из хранилища redux довольно просто. Но если вы храните токены в файлах cookie, большую часть времени вам придется использовать сторонний пакет для работы с файлами cookie. Я предпочитаю cookie-cutter и next-cookie с Next JS для обработки методов cookie даже на стороне сервера.
После получения токена мы можем просто использовать его для дальнейшего запроса API. Другой способ - получить токен из Frontend и проверить, действителен ли токен с помощью API, а затем разрешить пользователю войти в ваше приложение.
Хранение данных
После того, как пользователь успешно вошел в систему через пользователя на приборной панели или на домашней странице и сохранил пользователя или необходимые данные в глобальном состоянии приложения. Первоначально вам нужно получить данные из API, а затем сохранить данные в глобальном состоянии.
Выход из системы
Когда пользователь нажимает кнопку выхода, токен удаляется из файла cookie и обновляются данные пользователя из глобального состояния вашего приложения. Обычно я сохраняю логическое значение isUserLoggedIn, чтобы понять в приложении о состоянии входа пользователя в систему. Как только пользователь вышел из системы, я просто делаю значение isUserLoggedIn ложным.
Резюме
- Объявить защищенные маршруты и защитить защищенные маршруты
- Сохраните токен аутентификации либо в файле cookie, либо в глобальном состоянии, таком как redux.
- Получите токен и используйте его для дальнейшего запроса API и для повторной аутентификации пользователя.
- Получите пользовательские данные или другие необходимые данные, используя токены в других API, и сохраните их в глобальном состоянии вашего приложения.
- Выход пользователя из системы и очистка токенов, а также использование данных глобального состояния.
Вывод
На сегодня все, надеюсь, вам понравилось. До следующего раза, удачного дня, народ.
For more reach our website 💻 iHateReading
