Каков наилучший способ управления сеансом пользователя в React?

У меня есть сомнение в том, как управлять сеансом пользователя в React, например, в MVC.NET, вы просто делаете это только с помощью объекта Session (например, Session["test"] = "";), но, очевидно, React не может этого сделать.

Я читал об использовании состояния компонента, я полагаю, что устанавливает состояние в главном компоненте и передает это состояние другим компонентам с помощью реквизита. Также я видел людей, рекомендующих использовать браузер localStorage или файлы cookie, но я не знаю, если это хорошая идея или практика.

Есть ли лучший способ управлять переменными сеансов в React, чем localStorage или файлы cookie?

Ответ 1

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

Вы должны использовать cookies или localStorage для сохранения данных сеанса пользователя. Вы также можете использовать замыкание в качестве оболочки для ваших данных cookie или localStorage.

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

var UserProfile = (function() {
  var full_name = "";

  var getName = function() {
    return full_name;    // Or pull this from cookie/localStorage
  };

  var setName = function(name) {
    full_name = name;     
    // Also set this in cookie/localStorage
  };

  return {
    getName: getName,
    setName: setName
  }

})();

export default UserProfile;

Когда пользователь входит в систему, вы можете заполнить этот объект именем пользователя, адресом электронной почты и т.д.

import UserProfile from './UserProfile';

UserProfile.setName("Some Guy");

Затем вы можете получить эти данные из любого компонента в приложении, когда это необходимо.

import UserProfile from './UserProfile';

UserProfile.getName();

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

Ответ 2

Это не лучший способ управления сеансом в ответ. Вы можете использовать веб-токены для шифрования данных, которые вы хотите сохранить, вы можете использовать различное количество доступных сервисов, популярным из которых являются веб-токены JSON (JWT) с веб-токенами, после которых можно выйти из системы. некоторое время, если от клиента не было никаких действий. После создания токена вы можете сохранить его в локальном хранилище для удобства доступа.

jwt.sign({user}, 'secretkey', { expiresIn: '30s' }, (err, token) => {
    res.json({
      token
  });

пользовательский объект здесь - это пользовательские данные, которые вы хотите сохранить в сеансе

localStorage.setItem('session',JSON.stringify(token));

Ответ 3

Чтобы назвать несколько, мы можем использовать redux-реагировать на сеанс, который имеет хороший API для управления сеансом, как, например, initSessionService, refreshFromLocalStorage, checkAuth и многие другие. Он также предоставляет некоторые расширенные функциональные возможности, такие как Immutable JS.

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