如何在Vuejs中实现页面空闲超时检测

前端知否

发布于 2020-03-23 18:02:00

3K0

发布于 2020-03-23 18:02:00

文章被收录于专栏：前端知否

您是否需要检查用户在Vue应用程序中的不活跃状态？如果用户在一段时间内处于非活动状态，则要自动注销该用户或显示一个计时器。通常，具有机密数据的系统（如银行）通常会实现这种功能。需求是监听3秒钟的不活动状态并显示带有10秒计时器的模态提示框。如果在10秒的会话中没有任何操作，请自动注销用户。

需求

要在Vue应用程序中监听3秒钟的不活动状态，并显示带有10秒计时器的模态提示框。如果在10秒的会话中没有任何操作，请自动注销用户。

软件包依赖

Vue
Vuex
Idle-Vue

使用说明

让我们先运行以下命令来安装idle-vue软件包：

import IdleVue from "idle-vue";
const eventsHub = new Vue();

Vue.use(IdleVue, {
  eventEmitter: eventsHub,
  store,
  idleTime: 3000 // 3秒钟,
  startAtIdle: false
});

然后，将我们的库添加到main.js文件中。现在，我们将空闲时间设置为3秒。这是出于测试目的。我在IdleVue中添加了store作为参数，因为我们要访问isIdle闲置状态。

Main.js

import IdleVue from "idle-vue";
const eventsHub = new Vue();

Vue.use(IdleVue, {
  eventEmitter: eventsHub,
  store,
  idleTime: 3000 // 3秒钟,
  startAtIdle: false
});

IdleVue负责监听不活动事件。我们可以利用vuex在状态管理中获取isIdle空闲状态数据。

基础

让我们从基本功能开始。因此，在您的App.vue文件中添加一个名为IsIdle的计算属性，该属性返回this.$store.state.idleVue.isIdle。这是来自idle-vue的状态。它将返回bool数据。

如果未在IdleVue参数中定义store，则该值将是undefined。

App.vue

<template>
  <div id="app">
    <p>Is it Idle? - {{ isIdle }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    isIdle() {
      return this.$store.state.idleVue.isIdle;
    }
  }
};
</script>

如果我们3秒钟没有活动，则表示 false

如果我们要移动光标或进行任何活动，它将表示 true

它表明Idle-Vue插件在我们的Vue应用程序中运行良好。

添加模态提示框

让我们为模态框创建一些样式。在此示例中，我使用的是TailwindCSS。

/src/components/ModalIdle.vue

ModalIdle.vue

<template>
  <div class="overlay">
    <div class="modal">
      <div class="modal__title">
        <span>会话超时</span>
      </div>
      <div class="p-3">
      <p>You have left this browser idle for 10 minutes.</p>
        <p>10 second left</p>
      </div>
    </div>
  </div>
</template>

<style lang="postcss" scoped>
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  width: 500px;
  box-shadow: 1px 2px 4px rgba(153, 155, 168, 0.12);
  border-radius: 4px;
  @apply bg-white p-2;
}
.modal__title {
  color: #38404f;
  @apply flex items-center justify-between p-3 font-bold;
}
</style>

Cool。让我们将这个模态框组件导入到我们的App.vue文件中，并将其添加到我们的模板中。如果isIdle为true，则将显示该组件。

App.vue

<template>
  <div id="app">
    <ModalIdle v-if="isIdle" />
    <router-view />
  </div>
</template>

<script>
import ModalIdle from "@/components/ModalIdle;

export default {
  components: {
    ModalIdle
  },
  computed: {
    isIdle() {
      return this.$store.state.idleVue.isIdle;
    }
  }
};
</script>

现在，如果用户不进行任何操作，就会显示一个模态提示框。接下来，我们将在模态提示框中添加一个计时器。

模态计时器

我们要做的是在删除用户会话或注销之前，添加一个10秒的窗口供用户执行操作。

首先，让我们在ModalIdle.vue文件中创建一个时间变量。该变量将显示在模态提示框中。我们使用毫秒进行倒计时，并在计算属性中得到秒，以秒显示时间。

ModalIdle.vue

<template>
  <div class="overlay">
    <div class="modal">
      <div class="modal__title">
        <span>Session Expired</span>
      </div>
      <div class="p-3">
      <p>You have left this browser idle for 3 second.</p>
      <p>{{ second }} second left</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
  time: 10000
    }
  },
  computed: {
    second() {
      return this.time / 1000;
    }
  }
};
</script>

接下来，需要实现倒计时功能。我们使用setInterval来修改时间变量。由于我们使用的是setInterval，所以需要使用clearInterval终止计时器。

代码如下：

ModalIdle.vue

<template>
  <div class="overlay">
    <div class="modal">
      <div class="modal__title">
        <span>Session Expired</span>
      </div>
      <div class="p-3">
      <p>You have left this browser idle for 10 minutes.</p>
      <p>{{ time }} second left</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 10000
    }
  },

  created() {
    let timerId = setInterval(() => {
      this.time -= 1000;

      if (!this.$store.state.idleVue.isIdle) clearInterval(timerId);

      if (this.time < 1) {
        clearInterval(timerId);

        // logout
        alert('logout user....');
      }
    }, 1000);
  }
};
</script>

让我解释一下该组件中发生了什么。

我们设置了一个setInterval函数，每秒运行一次

let timerId = setInterval(() => {
  this.time -= 1000;
  ...
}, 1000);

如果用户从空闲状态恢复为活动状态，则需要使用clearInterval方法停止setInterval方法在后台运行。

let timerId = setInterval(() => {
  this.time -= 1000;
  if (!this.$store.state.idleVue.isIdle) clearInterval(timerId);
    ...
  }
}, 1000);

如果用户在10秒内没有采取任何措施，我们需要取消间隔，注销该用户，然后重定向到登录页面

let timerId = setInterval(() => {
  this.time -= 1000;

  if (!this.$store.state.idleVue.isIdle) clearInterval(timerId);

  if (this.time < 1) {
    clearInterval(timerId);
    // logout
    alert('logout user....');
  }
}, 1000);

完整源码

App.vue

<template>
  <div class="max-w-2xl mx-auto py-16">
    <p>Is it Idle? - <span class="font-bold">{{isIdle}}</span></p>
    <ModalIdle v-if="isIdle"/>
</div>
</template>

<script>
import ModalIdle from "@/components/ModalIdle;

export default {
  components: {
    ModalIdle
  },

  computed: {
    isIdle() {
      return this.$store.state.idleVue.isIdle;
    }
  }
};
</script>


ModalIdle.vue<template>
  <div class="overlay">
    <div class="modal">
      <div class="modal__title">
        <span>Session Expired</span>
      </div>
      <div class="p-3">
      <p>You have left this browser idle for 10 minutes.</p>
      <p>{{ time }} second left</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
  time: 10000
    }
  },

  created() {
    let timerId = setInterval(() => {
      this.time -= 1000;
      
      if (!this.$store.state.idleVue.isIdle) clearInterval(timerId);
      
      if (this.time < 1) {
        clearInterval(timerId);

        // logout
        alert('logout user....');
      }
    }, 1000);
  }
};
</script>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-02-17，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自前端知否微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度