React Redux - хранение вошедших в систему данных пользователя

Question

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

У меня есть пользовательский API-ключ (JWT), хранящийся в localStorage, но я вижу плохую практику хранить подобные имена, фамилии, адреса электронной почты и т. Д. В localStorage из-за уязвимостей XSS.

Я бы предпочел не использовать API на каждом маршруте, просто чтобы вернуть одни и те же данные пользователя.

Я попытался сохранить их в хранилище с избыточностью как файл session.user, который сбрасывается, когда я обновляю страницу или изменяю URL вручную. (сохранение сохраняется при смене маршрута с помощью приставки Сага push)

Как сохранить имя, фамилию и т. Д. Для использования на нескольких маршрутах и ​​при обновлении страницы?

Answer 1

Мой совет: когда пользователь входит на ваш сайт, создайте для него идентификатор сеанса и сохраните его в криптографически подписанном файле cookie. Убедитесь, что любая библиотека cookie, используемая вашей веб-платформой, устанавливает флаг cookie httpOnly. Этот флаг не позволяет браузеру читать файлы cookie, что необходимо для безопасного использования серверных сеансов с файлами cookie. Убедитесь, что в вашей библиотеке cookie также установлен флаг cookie SameSite = строгий (для предотвращения CSRF-атак), а также флаг secure = true (чтобы файлы cookie могли быть установлены только через зашифрованное соединение). Каждый раз, когда пользователь отправляет запрос на ваш сайт, используйте свой идентификатор сеанса (извлеченный из файла cookie, который он вам отправляет), чтобы получить данные своей учетной записи из базы данных или из кэша (в зависимости от размера вашего сайта)

Answer 2

Глобальное состояние Redux инициализируется при обновлении страницы. Вам нужно сохранить userDetails в localStorage, чтобы он был доступен на всех маршрутах даже после обновления страницы. вот как вы можете сделать это:

Установить местное хранилище:

 const userDetails = {userName: "foo", pass: "bar"}
 localStorage.setItem('userDetails', JSON.stringify(userDetails));

Доступ к пользовательским деталям из localStorage:

const userDetils = JSON.parse(localStorage.getItem( 'userDetails'));

Answer 3

Без фактического сохранения этой информации в localalstoarge я могу думать только о том, как этого добиться. Ваш компонент верхнего уровня будет перемонтироваться каждый раз, когда обновляется браузер, поэтому при монтировании этого компонента вы можете отклонить запрос на получение этой информации с сервера и сохранить ее в вашем хранилище приставок.

Answer 4

Redux сохранит данные в памяти браузера, они будут потеряны, если вы сделаете полное обновление.

Если вы хотите сохранить свои данные даже после обновления, вы можете сохранить избыточное хранилище в хранилище сеанса браузера https://github.com/ilyagelman/redux-sessionstorage

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