vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄(推薦)
更新時(shí)間：2020年01月22日 10:42:59 作者：Zxiuping
這篇文章主要介紹了vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
需求說明，后臺(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去檢查一下是否過了30分鐘。
總結(jié)
以上所述是小編給大家介紹的vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄，希望對(duì)大家有所幫助！
相關(guān)文章
這篇文章主要介紹了解決Vue大括號(hào)字符換行踩的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了詳解vue 數(shù)組和對(duì)象渲染問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
今天小編就為大家分享一篇Vue中的v-for指令不起效果的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Element-ui Image圖片按需引入大圖預(yù)覽
這篇文章主要為大家介紹了Element-ui Image圖片按需引入大圖預(yù)覽實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解
這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
這篇文章主要介紹的是Vue組件間的通信方式，本文將系統(tǒng)的介紹了幾種不使用Vuex，比較實(shí)用的組件間的通信方式，希望能幫助到大家2023-04-04
Vue3搭建組件庫(kù)開發(fā)環(huán)境的示例詳解
這篇文章給大家分享Vue3搭建組件庫(kù)開發(fā)環(huán)境，給大家講解依次搭建組件庫(kù)、example、文檔、cli，本文內(nèi)容是搭建組件庫(kù)的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌的效果（開箱即用）
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌的效果（開箱即用）,實(shí)現(xiàn)原理是激將1到9的數(shù)字豎直排版，通過translate移動(dòng)位置顯示不同數(shù)字，本文通過實(shí)例代碼講解，需要的朋友可以參考下2019-12-12