vue中js判斷長時間不操作界面自動退出登錄(推薦)
更新時間：2020年01月22日 10:42:59 作者：Zxiuping
這篇文章主要介紹了vue中js判斷長時間不操作界面自動退出登錄,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
需求說明，后臺有做半個小時不請求接口的話返回標識退出登錄，但是要請求接口才行，現(xiàn)在要實現(xiàn)前端用js判斷半個小時不操作界面的話自動跳轉(zhuǎn)到登錄頁面。
創(chuàng)建一個.js文件，在main.js引入此js（vue框架）
在登錄成功的時候保存當前時間localStorage.setItem("lastTime",new Date().getTime());
然后在點擊的時候更新這個時間
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 30 * 60 * 1000; //設置超時時間： 30分
window.onload = function () {
window.document.onmousedown = function () {
localStorage.setItem("lastTime",new Date().getTime());
}
};
function checkTimeout() {
currentTime = new Date().getTime(); //更新當前時間
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分鐘。
總結(jié)
以上所述是小編給大家介紹的vue中js判斷長時間不操作界面自動退出登錄，希望對大家有所幫助！
相關(guān)文章
vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖
這篇文章主要介紹了vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了table表格中使用el-popover 無效問題解決方法,實例只針對單個的按鈕管用在表格里每一列都有el-popover相當于是v-for遍歷了 所以我們在觸發(fā)按鈕的時候并不是單個的觸發(fā)某一個,需要的朋友可以參考下2024-01-01
vue中axios的封裝問題(簡易版攔截,get,post)
這篇文章主要介紹了vue中axios的封裝問題(簡易版攔截,get,post),需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue組件tree實現(xiàn)樹形菜單，小巧實用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
Vue3全局屬性app.config.globalProperties的實現(xiàn)
Vue3中的app.config.globalProperties是一個強大的全局配置功能,允許我們在應用級別設置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
本文主要介紹了elementUI彈窗里的表單重置不生效問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗證+上傳圖片+?防止表單重復提交,本文給大家展示效果圖和完整代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue返回上一頁面時回到原先滾動的位置的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12