vue实现用户长时间未操自动退出登录功能

前言

• 用户在长时间不操作页面的情况下，为了安全起见会让页面自动锁屏或者自动退出登录，我们可以通过 onmousedown 去监听页面是否进行操作，然后使用 stroage 去储存操作前的时间，然后和当前时间进行对比，满足条件的情况下清除缓存后跳转页面

• 首先，我们先建立一个清除缓存的工具文件 storageClear.js

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 {
    
    }
    return value || defaultValue;
  },
  removeItem(key) {
    
    
    window.localStorage.removeItem(key);
  },
  clear() {
    
    
    window.localStorage.clear();
  },
};

• 然后再创建一个监听页面是否操作后退出登录的工具文件 quitOperation.js

// 引入storageClear工具函数和router文件
import storageClear from "@/utils/storageClear";
import router from "../router/index"

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 = stroage.getItem("lastTime");

  if (currentTime - lastTime > timeOut) {
    
    
    //判断是否超时

    // 清除storage的数据(登陆信息和token)
    storageClear.clear();
    // 跳到登陆页
    if (router.history.current.path == "login") return; // 当前已经是登陆页时不做跳转
    router.push("/login");
  }
}

export default function() {
    
    
  /* 定时器 间隔30秒检测是否长时间未操作页面 */
  window.setInterval(checkTimeout, 30000);
}

• 最后在 main.js 里面注册

import QuitOperation from "./utils/quitOperation";
Vue.use(QuitOperation);