如何機智判斷頁面是刷新還是關閉，背景：vue項目，需求：關閉頁面，下次直接跳到登陸頁

最近項目有這么個需求：要在關閉當前系統的窗口的時候，退出登錄，

因為如果不退出登錄可能存在安全風險，其實我想說，電腦沒事別借給別人活着離開工位記得一定要鎖屏，其實我們設置了cookie失效時間的，過了一段時間會自動清空cookie。

經過我查資料，自身嘗試網上的各種方法，發現都有問題。

總結這一路的嘗試：

 

一、頁面加載時只執行onload ，頁面關閉時只執行onunload，頁面刷新時先執行onbeforeunload，然后onunload，最后onload。

經過驗證我得出的結論是：

（1）對於ie，谷歌，360：

//頁面加載時只執行onload//頁面刷新時，刷新之前執行onbeforeunload事件，在新頁面即將替換舊頁面時onunload事件，最后onload事件。//頁面關閉時，先onbeforeunload事件，再onunload事件。

（2）對於火狐：

//頁面刷新時，只執行onunload；頁面關閉時，只執行onbeforeunload事件那么回歸正題，到底怎樣判斷瀏覽器是關閉還是刷新？我按照網上的各種說法實驗千百遍，都未成功，

 

二、機智的判斷頁面刷新還是關閉

關鍵點：刷新完成之后會執行onload方法，根據session存標志變量來清空cookie

我的思路是：刷新和關閉，無論哪個瀏覽器都會執行onunload方法或者onbeforeunload方法，其實我們在這兩個方法里是判斷不了的，但是在刷新之后會再一次執行onload方法，所以我在這兩個方法里將一個標志位變量放在session里。然后在onload方法執行的時候判斷session里是否有這個變量，有的話，說明是刷新，不然就是關閉。

import Cookies from 'js-cookie'

/*區分關閉和刷新，關閉退出登錄 start*/
window.onload = function(){
  if(!window.sessionStorage["tempFlag"]){
    Cookies.remove('userId')
    Cookies.remove('userName')
    location.reload();   //不能省，強制跳到登陸頁
  }else{
    window.sessionStorage.removeItem("tempFlag");
  }
}
window.onunload = function (){
  window.sessionStorage["tempFlag"] = true;
}
window.onbeforeunload = function (){
  window.sessionStorage["tempFlag"] = true;
}

 

 

目前項目中使用時可行的，不足的地方：一個系統的多個頁面同時打開，關掉其中一個頁面也會清空cookie，重新登錄

誰讓項目登錄用的是cookie存，如果換成session存登錄信息就不一樣了