bootstrap如何用js调用模态框_如何在Vuejs中实现页面空闲超时检测-CSDN博客

本文链接：https://blog.csdn.net/weixin_39634022/article/details/111677515

您是否需要检查用户在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

Is it Idle? - {{ isIdle }}

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

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

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

添加模态提示框

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

/src/components/ModalIdle.vue

ModalIdle.vue

会话超时

You have left this browser idle for 10 minutes.

10 second left

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

App.vue

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

模态计时器

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

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

ModalIdle.vue

Session Expired

You have left this browser idle for 3 second.

{{ second }} second left

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

代码如下：

ModalIdle.vue

Session Expired

You have left this browser idle for 10 minutes.

{{ time }} second left

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

我们设置了一个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

Is it Idle? - {{isIdle}}

ModalIdle.vue

Session Expired

You have left this browser idle for 10 minutes.

{{ time }} second left