vue中js判斷長時間不操作界面自動退出登錄的案例

這篇文章主要介紹vue中js判斷長時間不操作界面自動退出登錄的案例，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

需求說明，后臺有做半個小時不請求接口的話返回標(biāo)識退出登錄，但是要請求接口才行，現(xiàn)在要實現(xiàn)前端用js判斷半個小時不操作界面的話自動跳轉(zhuǎn)到登錄頁面。

創(chuàng)建一個.js文件，在main.js引入此js（vue框架）

在登錄成功的時候保存當(dāng)前時間localStorage.setItem("lastTime",new Date().getTime());

然后在點(diǎn)擊的時候更新這個時間

var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 30 * 60 * 1000; //設(shè)置超時時間： 30分
 
window.onload = function () {
  window.document.onmousedown = function () {
    localStorage.setItem("lastTime",new Date().getTime());
  }
};
function checkTimeout() {
  currentTime = new Date().getTime(); //更新當(dāng)前時間
  lastTime = localStorage.getItem("lastTime");
  // console.log(currentTime - lastTime);
  // console.log(timeOut);
  if (currentTime - lastTime > timeOut) { //判斷是否超時
    // console.log("超時");
    var url = window.location.href;
    var newUrl=url.match(/(\S*)#/)[1];
    
    window.open(newUrl + '#/login','_self');
  }
}
 
/* 定時器 間隔30秒檢測是否長時間未操作頁面 */
window.setInterval(checkTimeout, 30000);

每隔30s去檢查一下是否過了30分鐘。

以上是“vue中js判斷長時間不操作界面自動退出登錄的案例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！