Vue 用户30分钟未操作，页面跳转到登录页 

<template>
  <div id="app">
    <router-view ></router-view>
    <TipDialog v-if="tiptype"></TipDialog>
  </div>
</template>

<script>
  import TipDialog from "@/components/tipDialog.vue";
  export default {
    components: { TipDialog },
    name: "App",
    data() {
      return {
        timeOut: 2 * 60 * 1000,//120秒未操作提示弹框
        // timeOut: 10 * 1000,
        lastTimeStoreId: 'lastTime_jc',
        tiptype: false,
        timer: null,
      };
    },
    watch: {
      //监听再那个页面去执行定时器
      $route(to, from) {
        let that = this;
        if (to.path == '/shoopcar' || to.path == '/orderAdd' || to.path == '/detailBox') {
          clearInterval(that.timer)
          that.timer = setInterval(this.checkTimeout, 1000);
        } else {
          clearInterval(that.timer)
        }
      }
    },
    mounted() {
      let that = this;
      // 监听事件
      that.$nextTick(function () {
        window.addEventListener('click', that.setLastTime)
        window.addEventListener('keydown', that.setLastTime)
        window.addEventListener('scroll', that.setLastTime)
        window.addEventListener('touchstart', that.setLastTime)
        window.addEventListener('touchend', that.setLastTime)
      })
    },
    methods: {
      tipTypeson() {
        this.tiptype = false;
      },
      setLastTime() {
        localStorage.setItem(this.lastTimeStoreId, new Date().getTime());
      },
      // 获取时间
      getLastTime() {
        return localStorage.getItem(this.lastTimeStoreId);
      },
      // 删除
      removeLastTime() {
        localStorage.removeItem(this.lastTimeStoreId)
      },
      checkTimeout() {
        let that = this;
        console.log(111);
        let currentTime = new Date().getTime();
        let lastTime = this.getLastTime();
        if (currentTime - lastTime > that.timeOut) {
          that.tiptype = true;
          clearInterval(that.timer)
        }
      },
    },
  };
</script>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    background: #F8F8F8;
  }

  input::-webkit-input-placeholder {
    color: #999;
  }

  .tisps {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 100;
  }
</style>

 

<template>
<div id="app">
<router-view ></router-view>
<!-- <keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" /> -->
<TipDialog v-if="tiptype"></TipDialog>
</div>
</template>

<script>
import { canclesoldout, infosoldout } from "@/api/personal";
import { checkToken } from "@/utils/storage";
import { getToken } from "@/utils/auth";
import TipDialog from "@/components/tipDialog.vue";
export default {
components: { TipDialog },
name: "App",
data() {
return {
timeOut: 2 * 60 * 1000,//120秒未操作提示弹框
// timeOut: 10 * 1000,
lastTimeStoreId: 'lastTime_jc',
tiptype: false,
timer: null,
};
},
watch: {
//监听再那个页面去执行定时器
$route(to, from) {
let that = this;
if (to.path == '/shoopcar' || to.path == '/orderAdd' || to.path == '/detailBox') {
clearInterval(that.timer)
that.timer = setInterval(this.checkTimeout, 1000);
} else {
clearInterval(that.timer)
}
}
},
mounted() {
let that = this;
// 监听事件
that.$nextTick(function () {
window.addEventListener('click', that.setLastTime)
window.addEventListener('keydown', that.setLastTime)
window.addEventListener('scroll', that.setLastTime)
window.addEventListener('touchstart', that.setLastTime)
window.addEventListener('touchend', that.setLastTime)
})
},
methods: {
tipTypeson() {
this.tiptype = false;
},
setLastTime() {
localStorage.setItem(this.lastTimeStoreId, new Date().getTime());
},
// 获取时间
getLastTime() {
return localStorage.getItem(this.lastTimeStoreId);
},
// 删除
removeLastTime() {
localStorage.removeItem(this.lastTimeStoreId)
},
checkTimeout() {
let that = this;
console.log(111);
let currentTime = new Date().getTime();
let lastTime = this.getLastTime();
if (currentTime - lastTime > that.timeOut) {
that.tiptype = true;
clearInterval(that.timer)
}
},
},
};
</script>
<style>
html,
body {
width: 100%;
height: 100%;
background: #F8F8F8;
}

input::-webkit-input-placeholder {
color: #999;
}

.tisps {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 100;
}

/*订单*/
/*.order-list .van-tabs__line {
background-color: #FFC536;
}*/
.order-list .van-tabs__content {
background-color: #f8f8f8;
}

.order-box .van-grid-item__text {
color: #666;
font-size: 0.26rem;
}

.order-box .van-cell {
align-items: center;
}

.order-box .cell-value-class {
color: #666!important;
}

.ellipsis-one {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

/*个人中心模块*/
.personal-page .tab-box .van-grid-item__text {
margin-top: 0.2rem;
}


/*服务预约 搜索*/
.van-search__content {
background-color: #fff;
}

/*预约信息*/
.seat-creat-order-page .van-radio--horizontal,
.add-con .van-radio--horizontal {
margin-right: 0 !important;
}

.seat-creat-order-page .van-radio__label,
.add-con .van-radio__label {
margin-left: 0.08rem;
}

/**/
.van-step__circle-container,
.van-step__line {
margin-top: 0.5rem;
}
</style>
posted @ 2023-06-05 10:21  前端—小白  阅读(238)  评论(0)  编辑  收藏  举报