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

Question

[Максим Глобак]

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

1) Нужно ли в корневом компоненте лезть за пользователем в api, если таково нет в стейте?
2) Что считать за пруф об авторизации пользователя? токены или данные пользователя?
P.S. на каждый запрос к api есть проверка на валидность токена и обработку 401 ошибки.

Answer 1

[Антон Спирин]

1. Создайте async action init(), где и загружайте все данные необходимые для инициализации, либо передавайте токен в cookie, проверяйте и пишите данные на сервере в шаблон:

<script>window.__INITIAL_STATE__ = { ... }</script>

2. На клиенте для проверки вы можете использовать какие-либо данные из store(store.user, srore.auth, etc), естественно в случае 401 данные в store надо тут же обновлять и отправлять на Login.

Comments

[Максим Глобак]

Т.к. у меня есть мобильные приложения, то я не использую куки. Но насчет inital state большое спасибо

Answer 2

[Sergiu Mitu]

Впринцыпе вы все правильно делаете. Насчет рефреша, лучше всего проверять авторизован ли юзер на сервере для этого вместо localstorage, лучше использовать куки, так как к ним есть доступ с сервера. Проверяем если есть кука token и она валидна рендерим сайт с так называемым initialState, к примеру:

window.initialState = {
user: {
id: 1,
avatar: '',
....
}
}

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

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

Comments

[Максим Глобак]

Спасибо, но я не использую куки, потому что у меня есть мобильные приложения и там только по токенам авторизация. Хочу сделать единый подход. Но ваш подход понял, если юзера нет, то жду его загрузки и дальше действую по плану.

[Sergiu Mitu]

Максим Глобак,

но я не использую куки, потому что у меня есть мобильные приложения и там только по токенам авторизация.

так я и не продлагал отказаться от токена, просто хранить его не в localstorage а в куках.