如何在Vuejs中實現頁面空閒超時檢測

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

更多內容，歡迎訪問：http://zhaima.tech