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