快捷導(dǎo)航

vue設(shè)置頁面超時15分鐘自動退出登錄的方法詳解

更新時間：2023年10月16日 09:29:38 作者：SwJieJie

當(dāng)用戶登錄后,如果長時間未操作頁面這個時候需要自動退出登錄回到登錄頁面,本文將給大家介紹一下vue設(shè)置頁面超時15分鐘自動退出登錄的方法,感興趣的同學(xué)可以自己動手試一下

Vue設(shè)置長時間未操作登錄以后自動到期返回登錄頁

方法一：

在app.vue中添加點擊事件，并且點擊時候添加點擊的時間，這里我們進(jìn)行判斷是否超時情況
Vue2里面的使用

<template>
  <!-- 添加點擊事件 -->
  <div id="app" style="height: 100%" @click="isTimeOut">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      lastTime: null, // 最后一次點擊的時間
      currentTime: null, // 當(dāng)前點擊的時間
      timeOut: 15 * 60 * 1000 // 設(shè)置超時時間:30分鐘
    }
  },
  created () {
    this.lastTime = new Date().getTime()
  },
  methods: {
    isTimeOut () {
      this.currentTime = new Date().getTime() // 記錄這次點擊的時間
      if (this.currentTime - this.lastTime > this.timeOut) { // 判斷上次最后一次點擊的時間和這次點擊的時間間隔是否大于30分鐘
        if (localStorage.getItem('loginInfo')) { // 如果是登錄狀態(tài)
          localStorage.clear()
          sessionStorage.clear();
          this.$router.push({name: 'login'})
        } else {
          this.lastTime = new Date().getTime()
        }
      } else {
        this.lastTime = new Date().getTime() // 如果在30分鐘內(nèi)點擊，則把這次點擊的時間記錄覆蓋掉之前存的最后一次點擊的時間
      }
    }
  }
}
</script>

方法二：

Vue3里面應(yīng)用：

在路由ruouter路由加載后進(jìn)行判斷是否有超時的邏輯

具體引用如下：

在utils里面創(chuàng)建點擊是否超時的組件如下activeCheck.ts

import { Local, Session } from "./storage"
import router from '/@/router';
const timeOut = 15 * 60 * 1000; //設(shè)置超時時間： 15分
function updateActiveTime() {
  localStorage.setItem('lastActiveTime', new Date().getTime() + '');
}
window.onload = function () {
  window.document.onmousedown = updateActiveTime;
};
let checkActiveInterval: any = null
export const startActiveCheck = () => {
  if (checkActiveInterval !== null) return
  updateActiveTime();
  checkActiveInterval = setInterval(() => {
    const currentTime = new Date().getTime();
    const lastActiveTime = localStorage.getItem('lastActiveTime');
    if (currentTime - Number(lastActiveTime) > timeOut) {
      Local.clear();
      Session.clear();
      clearInterval(checkActiveInterval)
      checkActiveInterval = null
      router.push('/login');
    }
  }, 30000);
}
export const endActiveCheck = () => {
  clearInterval(checkActiveInterval)
  checkActiveInterval = null
}

這里的storage.ts存儲組件如下：

import Cookies from 'js-cookie';
/**
 * window.localStorage 瀏覽器永久緩存
 * @method set 設(shè)置永久緩存
 * @method get 獲取永久緩存
 * @method remove 移除永久緩存
 * @method clear 移除全部永久緩存
 */
export const Local = {
	// 查看 v2.4.3版本更新日志
	setKey(key: string) {
		// @ts-ignore
		return `${__NEXT_NAME__}:${key}`;
	},
	// 設(shè)置永久緩存
	set<T>(key: string, val: T) {
		window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 獲取永久緩存
	get(key: string) {
		let json = <string>window.localStorage.getItem(Local.setKey(key));
		try{
			return JSON.parse(json);
		}catch{
			return json
		}
	},
	// 移除永久緩存
	remove(key: string) {
		window.localStorage.removeItem(Local.setKey(key));
	},
	// 移除全部永久緩存
	clear() {
		window.localStorage.clear();
	},
};
/**
 * window.sessionStorage 瀏覽器臨時緩存
 * @method set 設(shè)置臨時緩存
 * @method get 獲取臨時緩存
 * @method remove 移除臨時緩存
 * @method clear 移除全部臨時緩存
 */
export const Session = {
	// 設(shè)置臨時緩存
	set<T>(key: string, val: T) {
		window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 獲取臨時緩存
	get(key: string) {
		let json = <string>window.sessionStorage.getItem(Local.setKey(key));
		return JSON.parse(json);
	},
	// 移除臨時緩存
	remove(key: string) {
		window.sessionStorage.removeItem(Local.setKey(key));
	},
	// 移除全部臨時緩存
	clear() {
		window.sessionStorage.clear();
	},
};

import { endActiveCheck, startActiveCheck } from '../utils/activeCheck';
// 路由加載后
router.afterEach((to) => {
  NProgress.done();
  if (to.path === '/login') {
    endActiveCheck()
  } else {
    startActiveCheck()
  }
});

到此這篇關(guān)于vue設(shè)置頁面超時15分鐘自動退出登錄的方法詳解的文章就介紹到這了,更多相關(guān)vue頁面自動推出登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: