Как сделать простую регистрацию/авторизацию React?

Доброго времени суток. Подскажите как это сделать или может быть у кого есть ссылка на шаблон подобной регистрации.

Необходимо реализовать приложение на React (без TypeScript), которое предполагает регистрацию пользователя, авторизацию, вывод информации о пользователе.

Необходимо использовать Axios для обращения к серверу, React-router-dom для роутинга, Redux для state-management.

Приложение должно предполагать роуты со следующей функциональностью:

/ - главная страница, для вывода информации о пользователя, приватный роут
/signup - регистрация, публичный роут
/login - авторизация, публичный роут

На сервере используется JWT-авторизация, которая при успешном логине возвращает client_id пользователя, access_token, resfresh_token - для хранения необходимо использовать localStorage.

Если авторизованный пользователь переходит напрямую на /login или /signup - его нужно отправлять на главную, на приватный роут.

API регистрации - erp.apptrix.ru/api/clients/create . Обязательные поля - объект user (внутри email и password), invited_by - пригласительный код , name, surname, country_key (использовать RU).

При успешной регистрации необходимо активировать аккаунт, для этого сообщите нам E-mail, на который была регистрация.

Необходимо обработать ответ сервера по регистрации - в случае ошибок выводить их в alert’e, в случае успеха - alert об успешной регистрации и редирект на страницу авторизации.

API авторизации - erp.apptrix.ru/api/clients/token . Принимает username и password, в случае успеха возвращает токены и client_id. Необходимо предусмотреть interceptor (middleware в axios’е), который будет подставлять в каждый запрос заголовок - Authorization: Bearer #TOKEN#, где #TOKEN# - полученный access_token при авторизации. (если юзер не авторизован, то заголовок не подставляем, соответственно). Также нужно проверять ответ сервера при КАЖДОМ запросе, и в случае 401 - пытаться обновить access_token по refresh_token’у (метод в API - erp.apptrix.ru/api/clients/token/refresh , принимает refresh_token). Если по этому методу приходит ошибка - чистить localstorage и отправлять на страницу авторизации.

На главной странице по роуту / необходимо запросить и вывести информацию об авторизованном юзере из метода erp.apptrix.ru/api/clients/RU-000000 , где вместо RU-000000 - client_id текущего клиента.
  • Вопрос задан
  • 162 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы