微服务和VUE入门教程(22): 页面长时间未操作自动退出登录

hdubigben

已于 2023-02-11 10:56:40 修改

阅读量1.2k

点赞数 1

分类专栏：微服务和VUE 文章标签： java vue

于 2020-08-14 21:55:14 首次发布

本文链接：https://blog.csdn.net/weixin_42754905/article/details/107958892

版权

微服务和VUE 专栏收录该内容

27 篇文章 18 订阅

订阅专栏

微服务和VUE入门教程(22): 页面长时间未操作自动退出登录

1. 前言：

当我们长时间未操作页面的时候，系统应自动退出，这也是一种自我保护机制吧。

由于VUE是单页面应用，这个功能实现起来相对来说简单一点。

2. 前端代码修改：

思路: 在初始化页面的时候，会记录初始化的时间，在

上加一个click方法，当你点击系统中任意页面中任何地方都会触发这个方法。如果已经超时，而且已登录，就会有提醒，并且跳转到登录页面。

如不超时，则更新初始时间。

<template>
  <div id="app" @click="isTimeOut">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    this.lastTime = new Date().getTime();
  },
  data(){
    return{
      lastTime: null,
      currentTime: null,
      timeOut: 6*1000  //超时时间
    }
  },
  methods:{
    isTimeOut(){
      this.currentTime = new Date().getTime();
      if(this.currentTime - this.lastTime > this.timeOut){
        //如果处于登录状态，超时不操作，给出警告，跳转至登录页面
        if(localStorage.getItem('Authorization')){
          //清空登录信息
          localStorage.removeItem("userName");
          localStorage.removeItem("Authorization");
          localStorage.removeItem("signTime");
          //弹出框提醒，页面跳转
          window.alert("长时间未操作，请重新登录");
          window.location.href = '/';
        }
      }else{
        this.lastTime = new Date().getTime();
      }
    }
  }
}
</script>

<style>
。。。。。。
</style>