100 lines
3.0 KiB
Vue
100 lines
3.0 KiB
Vue
<template>
|
|
<v-footer color="blue lighten-2" app>
|
|
<one-clock class="hidden-sm-and-down"></one-clock>
|
|
<v-spacer></v-spacer>
|
|
<span class="one-footer white--text">
|
|
<code class="mb-0">Auto logged out in <span>{{ secondsUntilExpire }}</span> seconds</code>
|
|
</span>
|
|
</v-footer>
|
|
</template>
|
|
|
|
<style>
|
|
span.one-footer {
|
|
margin-right: 30px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
IDLE_TIMEOUT: 5 * 60, // Waktu idle dalam detik
|
|
autologoutCounter: 0, // Counter idle dalam localStorage
|
|
_idleSecondsTimer: null,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
secondsUntilExpire() {
|
|
return this.IDLE_TIMEOUT - this.autologoutCounter;
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
// Mengambil waktu logout yang disesuaikan jika tersedia
|
|
if (localStorage.getItem("user")) {
|
|
var retrievedObject = localStorage.getItem("user");
|
|
var dtuser = JSON.parse(retrievedObject);
|
|
if (dtuser.time_autologout && parseInt(dtuser.time_autologout) > 0) {
|
|
this.IDLE_TIMEOUT = parseInt(dtuser.time_autologout) * 60;
|
|
}
|
|
}
|
|
|
|
// Inisialisasi autologout di localStorage jika belum ada
|
|
if (localStorage.getItem("autologout") === null) {
|
|
localStorage.setItem("autologout", 0);
|
|
}
|
|
localStorage.removeItem("logoutTriggered");
|
|
|
|
// Event listeners untuk reset idle timer saat ada aktivitas pengguna
|
|
document.onclick = this.resetIdleTimer;
|
|
document.onmousemove = this.resetIdleTimer;
|
|
document.onkeypress = this.resetIdleTimer;
|
|
|
|
// Mulai interval untuk memeriksa idle time dan update counter
|
|
this._idleSecondsTimer = setInterval(this.checkIdleTime, 1000);
|
|
|
|
// Event listener untuk perubahan `localStorage` guna sinkronkan logout antar tab
|
|
window.addEventListener("storage", this.handleStorageChange);
|
|
},
|
|
|
|
methods: {
|
|
resetIdleTimer() {
|
|
localStorage.setItem("autologout", 0);
|
|
this.autologoutCounter = 0; // Reset counter di data reaktif
|
|
},
|
|
|
|
checkIdleTime() {
|
|
let xcounter = parseInt(localStorage.getItem("autologout"));
|
|
xcounter++;
|
|
localStorage.setItem("autologout", xcounter);
|
|
this.autologoutCounter = xcounter; // Update counter di data reaktif
|
|
|
|
// Jika waktu idle telah habis, logout semua tab
|
|
if (xcounter >= this.IDLE_TIMEOUT) {
|
|
clearInterval(this._idleSecondsTimer);
|
|
localStorage.setItem("logoutTriggered", true); // Set trigger logout
|
|
localStorage.removeItem("autologout"); // Hapus autologout
|
|
window.one_logout('/one-ui/test/vuex/one-login-v2') // Arahkan ke login
|
|
}
|
|
},
|
|
|
|
handleStorageChange(event) {
|
|
if (event.key === "logoutTriggered" && event.newValue === "true") {
|
|
// Redirect semua tab ke halaman login jika logoutTriggered berubah
|
|
window.one_logout('/one-ui/test/vuex/one-login-v2')
|
|
}
|
|
}
|
|
},
|
|
|
|
beforeDestroy() {
|
|
clearInterval(this._idleSecondsTimer);
|
|
window.removeEventListener("storage", this.handleStorageChange);
|
|
},
|
|
|
|
components: {
|
|
'one-clock': httpVueLoader('./oneTanggal.vue')
|
|
}
|
|
}
|
|
</script>
|