vue实现用户长时间不操作，自动退出登录

清疚 2022-10-10 04:43 229阅读 0赞

## 一、需求说明 ##

昨天后端开发人员让我实现一个网页锁屏，当时我一头雾水，问他为啥搞的跟安卓系统一样。他的回复是"看起来帅点"。

首先我们梳理下逻辑，先来个简化版的，用户长时间未操作时，返回登录页

## 二、思路 ##

使用 mouseover 事件来监测是否有用户操作页面，写一个定时器间隔特定时间检测是否长时间未操作页面，如果是，退出登陆，清除token，返回登录页

## ##

### 三、实现 ###

**【1】在util文件夹下创建一个storage.js封装localStorage方法**

export default {
      setItem(key, value) {
        value = JSON.stringify(value);
        window.localStorage.setItem(key, value)
      },
      getItem(key, defaultValue) {
        let value = window.localStorage.getItem(key)
        try {
          value = JSON.parse(value);
        } catch(e) {}
        return value || defaultValue
      },
      removeItem(key) {
        window.localStorage.removeItem(key)
      },
      clear() {
        window.localStorage.clear()
      },
    }

**【2】在util文件夹下创建一个astrict.js**

每隔30s去检查一下用户是否过了30分钟未操作页面

// 引入路由和storage工具函数
    import storage from '@/utils/storage'
    import router from "@/common/router"
     
    let lastTime = new Date().getTime()
    let currentTime = new Date().getTime()
    let timeOut = 30 * 60 * 1000  //设置超时时间: 30分钟
     
    window.onload = function () {
      window.document.onmousedown = function () {
        stroage.setItem("lastTime", new Date().getTime())
      }
    };
     
    function checkTimeout() {
      currentTime = new Date().getTime()		//更新当前时间
      lastTime = storage.getItem("lastTime");
     
      if (currentTime - lastTime > timeOut) { //判断是否超时
     
        // 清除storage的数据(登陆信息和token)
        storage.clear()
        // 跳到登陆页
        if(router.currentRouter.name == 'login') return // 当前已经是登陆页时不做跳转
        router.push({ name: 'login' })
      }
    }
     
    export default function () {
      /* 定时器 间隔30秒检测是否长时间未操作页面 */
      window.setInterval(checkTimeout, 30000);
    }

感谢分享[https://blog.csdn.net/qq\_38128179/article/details/107518028?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522162467598416780265453556%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request\_id=162467598416780265453556&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~blog~first\_rank\_v2~rank\_v29-1-107518028.nonecase&utm\_term=%E8%87%AA%E5%8A%A8&spm=1018.2226.3001.4450][https_blog.csdn.net_qq_38128179_article_details_107518028_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162467598416780265453556_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_162467598416780265453556_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_first_rank_v2_rank_v29-1-107518028.nonecase_utm_term_E8_87_AA_E5_8A_A8_spm_1018.2226.3001.4450]

[https_blog.csdn.net_qq_38128179_article_details_107518028_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162467598416780265453556_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_162467598416780265453556_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_first_rank_v2_rank_v29-1-107518028.nonecase_utm_term_E8_87_AA_E5_8A_A8_spm_1018.2226.3001.4450]: https://blog.csdn.net/qq_38128179/article/details/107518028?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162467598416780265453556%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=162467598416780265453556&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-1-107518028.nonecase&utm_term=%E8%87%AA%E5%8A%A8&spm=1018.2226.3001.4450