Создайте модальное время ожидания сеанса на основе активности пользователя. Если пользователь остается активным, не показывать модальные, но продолжайте обновлять сессию sh

Question

Нужно запустить модал, если пользователь простаивает 10 минут. Когда модальное окно открыто, у пользователя будет 5 минут для взаимодействия с кнопкой внутри модального окна. Если нажать кнопку, будет отправлен запрос на обновление sh сеанса. Если нет, пользователь вышел из системы.

Если пользователь остается активным (нажатие клавиши, перемещение мыши, mousedown ... et c), модальное отображение не должно отображаться.

ПРОБЛЕМА:

Сеанс все равно истечет через 15 минут, если не будет обновлен. Если модальное изображение не отображается, у пользователя не будет возможности нажать кнопку и обновить sh сеанс.

Однако я не хочу делать запрос refre sh при каждом нажатии / перемещении мыши. Как настроить этот таймер, чтобы запрос refre sh периодически прерывал запросы API?

Использование Vue. js и Vuex.

Answer 1

Вы можете попробовать создать функцию (скажем, checkActivity), которая запускает setInterval, который будет добавлять прослушиватели событий на страницу каждые, скажем, 6 минут. Внутри этой функции вы можете добавить:

1. setTimeout, который будет отображать модальное значение через 3,5 минуты,
2. a setTimeout, который выйдет из них через ~ 4 минуты,
3. В прослушивателях событий вы можете запустить функцию, которая удаляет всех слушателей после запуска события, очистить два вышеупомянутых setTimeouts (используя clearTimeout) и запустить функцию checkActivity (чтобы проверить снова через 6 минут) ).

Кроме того, после написания этого ответа я нашел несколько полезных ресурсов, которые могут помочь: https://css-tricks.com/detecting-inactive-users/, который даже имеет реализацию Vue, или https://thisinterestsme.com/javascript-detect-user-activity/