Do you need to check for the inactivity of the user in your Vue apps? If the user is inactive in a period of time, then you wanna automatically log out the user or show a timer first. Normally, a system with confidential data likes bank normally implement this kind of feature.
To have Vue apps that listen for inactivity for 3 seconds and show a modal with a 10-second timer. If there is no action during the 10 seconds session, automatically logout the user.
Assume you have Vue apps running in your local with vex right now. Let’s install the
idle-vue package first by running
npm install idle-vue
Then, let’s add our library into
main.js file. For now, we will set 3 seconds for idle time. This is for testing purposes. I added
store as a parameter in
IdleVue because we want to access the state of idle. Thanks to this library.
idle-vue have done a great job dealing with listening to inactive event. We can take advantage for vuex, to get the data of status idle in state management.
Let’s start with basic functionality. So, in your
App.vue file add a
computed property called
IsIdle that return
this.$store.state.idleVue.isIdle. It's a state from the
idle-vue package. It will return
If you’re not defined
store in your
IdleVue parameter, the value will be
If we didn’t active for 3 seconds, it stated
If we’re moving cursor or do any activity, it will stated
It shows that
Idle-Vue plugins work well in our Vue apps.
Lets add some modal
Let’s create a design for modal. In this example, I’m using TailwindCSS. I added this modal element in separate component.
Cool. Let’s import this modal into our
App.vue file and add it into our template. The component will be shown if the
Congratulation. Now we have a modal if the user is idle. Next, we’re going to create a timer in the modal.
Timer in the modal
What we’re going to do is to add a 10 seconds window for user to take an action before we’re going to remove the user session or logout.
First of all lets create a
time variable in our
ModalIdle.vue file. This variable will be shown in the modal. We will be used in millisecond format. Let's add
computed property to display the time in second format.
Then, we need to make the
time is ticking in the modal like a timer. For to achieve this kind of approach, we need to use
setInterval to modify the
time variable. Since, we're using the
setInterval, then we need to use
clearInterval to kill the the timer.
This is how it should looks like in our component.
Let me explain what’s going on in the component.
We set a
setInterval function to subtract the
time variable by
1000 every 1 second.
If the user is coming back to active state from idle, we need to stop the
setInterval method from running in the background by using
If there is no action from user in 10 seconds, we need to kill the interval and redirect the user to sign out the user and redirect to the login page
Thanks for reading my article. Let me know if you have any idea, what should I write in my next article.
Originally published at https://jakzaizzat.com