Nuxtjs auto log out user inactive - vue.js

Question

I'm using Nuxtjs for my project. I need to logout the user if there is not active after a given time frame. I'm creating a new component name autologout.vue and add this code to it
autologout.vue
<template>
<div>
hello
<div v-if="warningZone">warning</div>
</div>
</template>
<script>
export default {
data() {
return {
events: ['click', 'mousemove', 'mousedown', 'scroll', 'keypress', 'load'],
warningTimer: null,
logoutTimer: null,
warningZone: false,
}
},
mounted() {
this.events.forEach(function (event) {
window.addEventListener(event, this.resetTimer())
}, this)
this.setTimers()
},
destroyed() {
this.events.forEach(function (event) {
window.removeEventListener(event, this.resetTimer())
}, this)
this.resetTimer()
},
methods: {
setTimers() {
this.warningTimer = setTimeout(this.warningMessage(), 4 * 1000)
this.logoutTimer = setTimeout(this.logoutuser(), 10 * 1000)
this.warningZone = false
},
warningMessage() {
this.warningZone = true
},
logoutuser() {
this.$auth.logout('local').then((data) => {
console.log(data)
})
},
resetTimer() {
clearTimeout(this.warningTimer)
clearTimeout(this.logoutTimer)
this.setTimers()
},
},
}
</script>
<style></style>
add import this component to layout->default.vue. I'm not using default.vue layout to my login page. after I'm login and redirect to the home page it always logout me. What is wrong?
I'm using this tutorial to implement this
Tutorial link

Answer 1

Although it is not a perfect way to handle the problem, but if you remove the parentheses present inside the addEventListener function, it will start working.
Change
window.addEventListener(event, this.resetTimer())
To
window.addEventListener(event, this.resetTimer)
And if you remove the paratheses from removeEventListener, it will again stop working. Don't know why.