Nuxtjs 自动注销用户不活动答案

【问题标题】：Nuxtjs auto log out user inactiveNuxtjs 自动注销用户不活动
【发布时间】：2023-03-16 20:33:01
【问题描述】：

我在我的项目中使用 Nuxtjs。如果在给定的时间范围后没有活动，我需要注销用户。我正在创建一个新组件名称 autologout.vue 并将此代码添加到其中

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>

将此组件添加到layout->default.vue。我没有在我的登录页面中使用 default.vue 布局。在我登录并重定向到主页后，它总是注销我。怎么了？

我正在使用本教程来实现这一点

Tutorial link

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

虽然这不是处理问题的完美方法，但如果您删除 addEventListener 函数中存在的括号，它将开始工作。

改变

window.addEventListener(event, this.resetTimer())

到

window.addEventListener(event, this.resetTimer)

如果您从 removeEventListener 中删除括号，它将再次停止工作。不知道为什么。

【讨论】：