дорогие форумчане. Недавно начал изучать React, да и вообще Frontend, после многолетнего Backend`a и вот сталкиваюсь с казалось бы простыми, но непонятными мне трудностями.
В данный момент интересует система аутентификации пользователя на сайте. Предположим у нас имеется локальный state
export interface ILoggedUserStateType {
LoggingIn: boolean;
LoggedIn: boolean;
}
Начальное значение у редьюсера:
const initialState: ILoggedUserStateType = {
LoggedIn: false,
LoggingIn: false
}
В момент авторизации на сервере генерируется JWT и помещается Cookie чтобы каждый следующий запрос был авторизованным на сервере. По успешному запросу авторизации отправляется команда на консьюмер и меняет состояние:
case LOGIN_SUCCESS:
return {
...state,
LoggedIn: true,
LoggingIn: false
};
Замечательно, теперь компоненты, которые проверяли флаг LoggedIn отображают авторизованные данные. Но длится это до первого обновления страницы, где происходит отчистка State. И вот мы вроде и авторизованы, но данные об этом не отображаются, пока мы не обновим State. Первая мысль была заносить что-то типа "LoggedId=yes" в LocalStorage и по нему при инициализации консьюмера выполнять проверку:
localStorage.getItem("LoggedIn") == "yes"
Но у данного подхода есть нюанс. В Cookie мы можем установить время жизни, например на час, после чего снова нужна будет авторизация. Но LocalStorage не имеет времени жизни и поэтому будет пытаться отображать данные будто бы мы авторизованный пользователь (за исключением тех данных, что берутся с сервера под авторизацией).
Еще одной мыслью было что при каждом открытии сайта на сервер будет отправляться запрос типа "CheckAuth", который будет возвращать true/false в зависимости от проверки. Но это лишние запросы и переключение между состояниями будет видно пользователю. Посмотрев сетевой поток различных крупных сайтов, не увидел тех решений, что пришли мне в голову.
Поэтому прошу натолкнуть на правильный путь. Спасибо