[Vuejs]-Create session timeout modal based on user activity. If user stays active, don't show modal, but continue to refresh session

1👍

You could try making a function (say, checkActivity) that runs a setInterval that will add event listeners to the page every, say 6 minutes. Inside that function, you could add:

  1. A setTimeout that will display the modal after 3.5 minutes,
  2. a setTimeout that will log them out after ~4 minutes,
  3. In the event listener(s), you could have them run a function that removes all of the listeners after the event is fired, clear the above two setTimeouts (using clearTimeout) and run the checkActivity function (to check again after 6 minutes).

Also, after writing this answer I found a couple of good resources that may help:
https://css-tricks.com/detecting-inactive-users/
which even has a Vue implementation, or https://thisinterestsme.com/javascript-detect-user-activity/

Leave a comment