vue關閉瀏覽器退出登錄的實現示例
項目需要:也在網上找瞭不少類似的文章,不過用起來多少有點問題,畢竟要適合自己的需求,我這裡是vue3適用,理論上vue2也可以使用,我寫的方法是通用的。
這些方法無非都是根據beforeunload
和unload
這兩個事件執行的。
下面我搜瞭下菜鳥教程和MDN對兩個事件的介紹,可自行琢磨。
1、beforeunload事件
1.1、菜鳥教程:
1.2、MDN
2、unload事件
2.1、菜鳥教程
2.2、MDN
MDN:通常而言,我們推薦使用 window.addEventListener() 來監聽 unload (en-US) 事件,而不是直接給 onunload 賦值。
下面貼我使用的源碼;
3、源碼部分
3.1、方法一:可寫於html頁面使用(直接使用)
var _beforeUnload_time = 0, _gap_time = 0; window.onunload = function (){ _gap_time = new Date().getTime() - _beforeUnload_time; if(_gap_time <= 10) {//瀏覽器關閉 window.mgr.signoutRedirect();//這個mgr是我暴露在window的退出登錄方法 }else{//瀏覽器刷新-chrome刷新 console.log(document.domain); return confirm("確定要離開本系統麼?"); } }; window.onbeforeunload = function (){ _beforeUnload_time = new Date().getTime(); };
3.2、方法二:可寫於組件如app.vue
使用(監聽事件)
data() { return { gap_time: 0, beforeUnload_time: 0, }; }, methods: { // 關閉窗口之前執行 beforeunloadHandler() { this.beforeUnload_time = new Date().getTime(); }, unloadHandler() { this.gap_time = new Date().getTime() - this.beforeUnload_time; //判斷是窗口關閉還是刷新 毫秒數判斷 網上大部分寫的是5 if (this.gap_time <= 10) { mgr.signoutRedirect(); // 退出登錄接口 這裡應當換為個人的登出方法 } else { console.log(document.domain); return confirm("確定要離開本系統麼?"); } }, }, unmounted() {//vue可換為destroyed()生命周期,不過這個也可以用 // 移除監聽 window.removeEventListener("beforeunload", () => this.beforeunloadHandler()); window.removeEventListener("unload", () => this.unloadHandler()); }, mounted() { // 監聽瀏覽器關閉 window.addEventListener("beforeunload", () => this.beforeunloadHandler()); window.addEventListener("unload", () => this.unloadHandler()); },
參考文章:
vue關閉瀏覽器時,觸發事件,執行退出登錄接口
vue 關閉瀏覽器清空token (區分刷新)
到此這篇關於vue關閉瀏覽器退出登錄的實現的文章就介紹到這瞭,更多相關vue關閉瀏覽器退出登錄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS前端性能優化解決內存泄漏頁面崩潰
- vue中的addEventListener和removeEventListener用法說明
- React如何實現全屏監聽Esc鍵
- Vue中addEventListener() 監聽事件案例講解
- Vue中使用addEventListener添加事件、removeEventListener移除事件的示例詳解