Где и как обрабатывать логику не относящуюся к ui в spa?

Question

[Артур]

стек

• react
  
• redux
  
• redux-saga
  

Кейс.
Токен авторизации живет 10минут.
Пользователь авторизуется в системе. Проявляет какую-то активность, но не отправляет запросов. Его разлогинивает т.к устаревает токен.

Придуманное решение. Отслеживаю активность пользователя (например движение мышки), запускаю интервал, в котором на 10 минуте проверяю, были ли движения мыши и отправляю фоновый запрос чтобы продлить токен.

Вопрос. Как правильно это реализовать в моем стеке? Именно как скомпоновать?

Текущее решение выглядит так, но я явно понимаю что нужно это сделать как-то в флоу саг

export class Tracker {
  constructor({trackEvents, dropActivityTimeMs}) {
    this.dropActivityTimeMs = dropActivityTimeMs;
    this.trackEvents = trackEvents;
    this.wasActivity = false;
    this.dropActivityIntervalId = null;
  }

  restartDropActivity() {
    clearInterval(this.dropActivityIntervalId);
    console.log('Обнуление активности перезапущено');
    this.dropActivityIntervalId = setInterval(() => {
      this.wasActivity = false;
    }, this.dropActivityTimeMs);
  }

  init() {
    this.trackEvents.forEach(event => {
      document.addEventListener(event, () => {
        console.log(`Было событие ${event}`);
        this.wasActivity = true;
        this.restartDropActivity();
      });
    })
  }
}


//в корне приложения вызываю
const events = ['mousemove'];
const tracker = new Tracker({
  trackEvents: events,
  dropActivityTimeMs: 5000,
});
const prolongateAfterMs = 3000;
tracker.init();
 
setInterval(() => {
  console.log(`активность в последние ${tracker.dropActivityTimeMs}ms`, tracker.wasActivity);
  if (tracker.wasActivity) {
    api.updateToken();
  }
}, prolongateAfterMs);

Answer 1

[Vladyslav Kliuiev]

С телефона не могу ответить подробнее, и я не совсем вижу всю ситуацию, но почему бы не присваивать время токена при закрытии страницы? То есть при открытии мы логинимся, сидим хоть до старости, а например в componentWillUnmount, или чём-то подобном, при закрытии страницы говорим токену что ему осталось жить 10 минут. Я конечно ещё не сталкивался с такой задачей, но всё же это выглядит лучше, чем следить за мышкой. Ибо при движении мыши совершается очень, ОЧЕНЬ много действий, и я боюсь что в лучшем случае это будет потреблять огромное количество ресурсов, а в худшем может вообще положить открытую страницу.

Comments

[Артур]

1. Время жизни токена хранится в самом токене. Токен поставляется бэкендом. Сооответственно если мы просрочим токен, и отправим запрос с ним на бек, то нас разлогинет.
2. Чтобы не было проблем с производительностью в отслеживании событий, есть подходы по их оптимизации, например throttling или debounce.