.jpg)
網(wǎng)頁(yè)開(kāi)發(fā)中，常需在用戶關(guān)閉頁(yè)面時(shí)執(zhí)行特定操作，例如彈出提示或注銷(xiāo)用戶會(huì)話。本文詳解如何在用戶關(guān)閉頁(yè)面時(shí)彈出提示并注銷(xiāo)用戶信息。
實(shí)現(xiàn)該功能的關(guān)鍵在于window.onbeforeunload事件監(jiān)聽(tīng)器與服務(wù)器端會(huì)話管理機(jī)制的配合。
window.onbeforeunload事件會(huì)在用戶嘗試關(guān)閉頁(yè)面前觸發(fā)。我們可以利用它彈出提示窗口：
window.onbeforeunload = function() { return "確定離開(kāi)當(dāng)前頁(yè)面嗎？"; };
此代碼會(huì)在用戶關(guān)閉頁(yè)面時(shí)彈出確認(rèn)框。不同瀏覽器對(duì)該事件的處理略有差異，對(duì)話框樣式和行為可能不同。
然而，僅彈出提示窗口不足以完成注銷(xiāo)。需要結(jié)合服務(wù)器端會(huì)話管理機(jī)制。建議步驟如下：
-
登錄態(tài)驗(yàn)證: 用戶登錄后，服務(wù)器生成唯一登錄態(tài)（例如Token），存儲(chǔ)于客戶端（Cookie或localStorage）和服務(wù)器端。每次請(qǐng)求都需攜帶此登錄態(tài)信息。
-
onbeforeunload事件中調(diào)用接口: 在window.onbeforeunload事件監(jiān)聽(tīng)器中，發(fā)送請(qǐng)求到服務(wù)器，告知服務(wù)器用戶將注銷(xiāo)。服務(wù)器應(yīng)失效該用戶的登錄態(tài)。
-
用戶請(qǐng)求觸發(fā)登錄態(tài)驗(yàn)證: 服務(wù)器驗(yàn)證每次請(qǐng)求的登錄態(tài)信息。
-
登錄態(tài)驗(yàn)證失敗，清理用戶信息: 登錄態(tài)驗(yàn)證失敗，服務(wù)器拒絕請(qǐng)求，客戶端應(yīng)清除本地存儲(chǔ)的用戶信息（cookie、localStorage中的用戶信息）。
通過(guò)以上步驟，即可在用戶關(guān)閉頁(yè)面時(shí)彈出提示，并有效注銷(xiāo)用戶信息，防止其他標(biāo)簽頁(yè)繼續(xù)使用失效的用戶信息。這需要前端JavaScript代碼與后端服務(wù)器代碼協(xié)同工作。
.png)
