Обработка аутентификации пользователей с помощью Redux и Redux Router

Мне было интересно, как люди обычно обрабатывают аутентификацию пользователя с помощью redux? Я использую Redux Router, и у меня есть API backend rails, который обрабатывает аутентификацию пользователя через токен аутентификации.

Когда пользователь отправляет форму знака, api вернет токен аутентификации, который будет использоваться для последующих запросов. Первоначально я просто сохранил этот токен аутентификации в едином дереве состояний, и каждый раз, когда я отправляю действие, которое должно выполнить запрос API, требующий аутентификации пользователя, я использую (диспетчер, getState) для извлечения этого токена аутентификации, а затем включаю его в API запрос. Итак: getState(). CurrentUser.auth_token.

Я не уверен, правильно ли я подхожу к этому. Некоторые люди используют localStorage с Redux для аутентификации пользователей для имитации сеансов на стороне сервера? Затем каждый раз, когда выполняется запрос API, я просто проверяю локальное хранилище для токена auth и если он там подписал пользователь?

В результате я использовал js-cookies и сделал Cookie.set, когда пользователь прошел аутентификацию. Мой корневой компонент <App /> затем имеет компонентDidMount, который отправляет действие initAuth(), которое проверяет текущее Cookie, чтобы узнать, действительно ли он действителен. Если это так, то пользователь обязуется подписаться в противном случае, он сбрасывает редуктор аутентификации по умолчанию.

Вот ссылка на репо с аутентификацией пользователя: https://github.com/SpencerCDixon/Kira/blob/master/client/actions/AuthActions.js

Любые советы или ресурсы будут высоко оценены. До сих пор я смотрел пример реального мира и пример React Router. Пример React Router, похоже, использует localStorage, поэтому мне интересно, если это правильный путь. Я заметил, что есть также пакет npm Redux Localstorage.

Хотелось бы узнать, если я случайно открою себя для какой-либо атаки на аутентификацию или если есть лучший способ приблизиться к этому потоку!

Ответ 1

Мне было интересно, как люди обычно обрабатывают аутентификацию пользователя с помощью сокращения?

Я был в такой ситуации во многих проектах, и я закончил решение, которое не заставляет меня потеть каждый раз, когда мне нужно обрабатывать аутентификацию в своих приложениях React/Redux.

В моих проектах я использую Node.js, но это ничего не меняет, вы можете использовать любую технологию на стороне сервера.

Решение

Я заметил, что в одностраничном приложении (SPA) механизм аутентификации обрабатывается на стороне клиента, как вы сказали, проверяя, есть ли у пользователя токен, проверяет его с сервером и затем перенаправляет на соответствующая база маршрутов на этом, теперь не вопрос, используете ли вы React/Redux, Angular, Ember или Backbone для своего SPA, он всегда будет неприятным.

Итак, я отделил процесс аутентификации (регистрации/входа) из основного приложения, поэтому, когда пользователь запускает мое приложение в первый раз, сервер проверяет куки файл token, если у пользователя есть этот файл cookie с запрос, сервер проверяет этот токен и, если он действительный, перенаправляет клиент на главную страницу приложения (например, index.html), если токен недействителен или не существует, сервер перенаправляет клиента на логин /sign up (login.html/signup.html).

Страница login.html не входит в основное приложение (одно в index.html), на самом деле оно имеет другую базу кода (легче с гораздо меньшим количеством кода, чтобы страница могла загружаться еще быстрее), и когда пользователь пытается войти в систему, сервер подтвердил имя пользователя и пароль с этой страницы login.html и, если это допустимые учетные данные, сервер затем установит для этого пользователя cookie token и перенаправит его на главную страницу приложения (индекс. html), где код приложения может быть загружен без необходимости обработки аутентификации, поскольку, если пользователь смог загрузить эту страницу (index.html), это означает, что он должен иметь действительный токен.

Ответ 2

Я только что закончил работу над проектом openx с открытым исходным кодом. Я храню токен в localStorage. для back end я использую node, но думаю, вы поймете эту идею.

https://github.com/DimitriMikadze/node-redux-auth