Задать вопрос
maximglobak
@maximglobak
iOS developer
javascript

Как хранить данные пользователя на клиенте?

Добрый день! Подскажите плиз флоу хранения данных пользователя на стороне клиента. Я делаю пет проект и в вебе я полный ноль. Но мой флоу авторизации выглядит следующим образом.
Во время логина я лезу к API и авторизовываю пользователя, т.е. выдаю ему два токена JWT (access & refresh) и сохраняю в локалсторедж.
Потом сразу лезу за данными пользователя, чтоб использовать их на сайте (имя, email, уровень доступа) и сохраняю в state.
На всех внутренних страницах проверяю наличие пользователя для доступа на страницу. Если данных нет, то перенаправляю на страницу входа.
Все работает хорошо до момента рефреша страницы, тогда стейт чистится весь и данных нет, пользователя перекидывает на страницу логина, что не хорошо.

1) Нужно ли в корневом компоненте лезть за пользователем в api, если таково нет в стейте?
2) Что считать за пруф об авторизации пользователя? токены или данные пользователя?
P.S. на каждый запрос к api есть проверка на валидность токена и обработку 401 ошибки.
  • Вопрос задан
  • 335 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. Создайте async action init(), где и загружайте все данные необходимые для инициализации, либо передавайте токен в cookie, проверяйте и пишите данные на сервере в шаблон:
<script>window.__INITIAL_STATE__ = { ... }</script>


2. На клиенте для проверки вы можете использовать какие-либо данные из store(store.user, srore.auth, etc), естественно в случае 401 данные в store надо тут же обновлять и отправлять на Login.
Ответ написан
1 комментарий
1 комментарий
EaGames
@EaGames
Front-end developer
Впринцыпе вы все правильно делаете. Насчет рефреша, лучше всего проверять авторизован ли юзер на сервере для этого вместо localstorage, лучше использовать куки, так как к ним есть доступ с сервера. Проверяем если есть кука token и она валидна рендерим сайт с так называемым initialState, к примеру:
window.initialState = {
user: {
id: 1,
avatar: '',
....
}
}

на клиенте при рендере приложения проверяем есть ли юзер в initialState и если есть то автоматом его авторизовываем.

НО не всегда есть доступ к серверу, по этому можно сделать все тоже на фронте, тоесть НЕ рендерить ничего пока не проверите авторизован ли юзер или нет.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать аудит сайта
19 апр. 2024, в 12:53
1000 руб./за проект
Требуется доработка бота
19 апр. 2024, в 12:41
8000 руб./за проект
Доработать сайт на React + Nest
19 апр. 2024, в 12:05
1500 руб./в час
Ещё заказы