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

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

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

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

總結這一路的嘗試：

 

1、頁面加載時只執行onload ，頁面關閉時只執行onunload，頁面刷新時先執行onbeforeunload，而後onunload，最後onload。

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

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

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

（2）對於火狐：

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

 

2、機智的判斷頁面刷新仍是關閉

關鍵點：刷新完成以後會執行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存登陸信息就不同了