Vue实现系统页面长时间不操作自动退出到登录页面

一、背景描述

现在要做这么一个需求，就是在页面上用户长时间没有操作，就认为是不活跃，自动退出到登录页面。
以vue-element-admin这个开源项目为例来说明，知道方法再套用到自己的系统上就可以啦~

二、准备工作

既然是以vue-element-admin为例，所以要先下载一下这个基础模板
vue-element-template基础开发模板

三、开始编码

（一）实现思路

1、在App.vue中监控点击事件，记录上一次操作时间，每次点击都会更新一下这个时间；
2、在登录后的首页里启动一个定时器，定时去检查用户是否从长时间没有操作；
3、判断用户长时间没有操作的办法是，当前时间减去上一次的操作时间，这个时间如果大于设置的超时时间，那就可以退出啦~

（二）来实现啦

1、先在src/store/modules目录下新建一个store文件login.js，可以存系统的上一次点击时间

/**
 * ClassName: vue-admin-template-master <br/>
 * Description:  <br/>
 * Date: 2021/5/9 10:43 PM <br/>
 * <br/>
 *
 * @author Yolanda
 *
 * 修改记录
 * @version 1.0.0 2021/5/9 Yolanda Initial Version<br/>
 *
 */
const state = {
  // 上一次点击页面的时间
  lastTime: new Date().getTime(),

};

const mutations = {
  SET_LASTTIME: (state, lastTime) => {
    state.lastTime = lastTime;
  }
};

const actions = {

};

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2、再在src/store/index.js中引入这个store文件login.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
// 引入login
import login from './modules/login'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    login
  },
  getters
})

export default store

3、在src/App.vue中添加点击事件，记录最新一次点击操作的时间

<template>
  <div id="app" @click="updateLastTime()">
    <router-view />
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      updateLastTime(){
        this.$store.commit('login/SET_LASTTIME'
          , new Date().getTime());
        console.log(this.$store.state.login.lastTime)
      }
    }
  }
</script>

4、在src/views/dashboard/index.vue中

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Dashboard',
    data() {
      return {
        // 上一次点击时间
        lastTime: null,
        // 当前时间
        currentTime: null,
        // 超时时间, 如果半个小时都没有点击页面就算超时
        sys_timeout: 30 * 60* 1000,
        // 检查的时间，每隔5分钟检查一次有没有超时
        check_time: 5 * 60 * 1000,
        // 计时器
        whole_timer: null
      }
    },
    created() {
      // 启动这个定时器  
      this.isLoginOut();
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    methods: {
      // 判断是否超时
      isTimeOut(){
        // 页面上一次的点击时间
        this.lastTime = this.$store.state.login.lastTime;
        this.currentTime = new Date().getTime();
        // 超时了
        if((this.currentTime - this.lastTime) > this.sys_timeout) {
          return true;
        } else {
          return false;
        }
      },
      isLoginOut() {
        // console.log("11111:" + this)
        // 每次用定时器之前先清除一下  
        clearInterval(this.whole_timer);
        // 这里要备份一下this指针
        let _this = this;
        this.whole_timer = setInterval(function () {
          console.log(_this.isTimeOut())
          // 判断一下是否超时，如果超时了就退出
          if (_this.isTimeOut()) {
            // console.log("22222:" + this)
            _this.$store.dispatch('user/logout');
            _this.$router.push(`/login?redirect=${_this.$route.fullPath}`);
            // 如果退出了就清除这个定时器，这里要延迟一秒清除，因为跳转到登录界面会有一点点延迟~  
            setTimeout(function() {
              clearInterval(_this.whole_timer);
            }, 1000);
          }
        }, _this.check_time);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
  &-container {
     margin: 30px;
   }
  &-text {
     font-size: 30px;
     line-height: 46px;
   }
  }
</style>

好啦，然后就可以实现页面长时间不点击自动退出到登录界面的效果啦，可以试下，在任何地方点击，时间都会重新开始计算时间~
不管写在哪个框架里，还是写在自己的代码里，思路都是这样滴~

如果喜欢本文点个赞或者关注一下叭~

关联博客
Uncaught TypeError: Cannot read property ‘dispatch‘ of undefined