Как грамотно организовать работу redux?

Question

[StrangeGoogle]

Здравствуйте!

Вопрос только для опытных разработчиков.

Что должно происходить после авторизации пользователя на странице?

В моем случае:

Делаем dispatch -> loginUser(username, password)
Отправляем на backend. Если всё ок, возвращаем access_token и access_token_expires_at. А если авторизация неуспешна, то просто возвращаем - 401 Unauthorized.

При получении access_token, мы сохраняем его в localStorage. Например:

localStorage.setItem('access_token', response.access_token)

.

Вопрос... Как бы вы реализовали это? Почему в некоторых примерах, в localStorage, в ячейке user хранят пользовательские данные? Если подумать, они же могут измениться, например имя пользователя или фамилия. Получается, что до следующей авторизации у нас будут невалидные данные о пользователе.

Что мы делаем в самом начале запуска приложения? Где именно мы проверяем есть ли у нас токен? А мы не должны еще на backend проверить её ? Ну, хотя бы отправить запрос на /api/auth/me?

Где-то читал, что куки лучше localStorage. Правда, не совсем понял почему. Ваше мнение на этот счет?

Пожалуйста, опишите в деталях грамотную реализацию авторизации в React.

Answer 1

[Vlad_Murashchenko]

Вам в любом случае нужно будет хранит access, refresh, access_expires_in, refresh_expires_in в каком-то защищённом месте недоступном для других приложений но доступном из js. Я использую для этого localStorage.

Так что хранить эти данные в redux, равно как и отправлять их туда через dispatch не нужно, пусть localStorage будет единственным источником правды. Ничего специфичного для реакта здесь тоже нет.

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

Перед каждым запросом делайте проверку аксесс токена, если он заекспайрился, то делайте рефреш откладывая все последующие запросы до его резолва, если рефреш не удался то просто кидайте пользователя на логин. В этом вам может помочь axios intercepters.

С остальными я думаю вы разберётесь :)

Также почитать про то как хорошо организовать работу с токеновми можно здесь https://gist.github.com/zmts/802dc9c3510d79fd40f9d...

Comments

[StrangeGoogle]

Спасибо!