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