vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
??項(xiàng)目需要:也在網(wǎng)上找了不少類似的文章,不過(guò)用起來(lái)多少有點(diǎn)問(wèn)題,畢竟要適合自己的需求,我這里是vue3適用,理論上vue2也可以使用,我寫的方法是通用的。
??這些方法無(wú)非都是根據(jù)beforeunload
和unload
這兩個(gè)事件執(zhí)行的。
??下面我搜了下菜鳥教程和MDN對(duì)兩個(gè)事件的介紹,可自行琢磨。
1、beforeunload事件
1.1、菜鳥教程:
1.2、MDN
2、unload事件
2.1、菜鳥教程
2.2、MDN
??MDN:通常而言,我們推薦使用 window.addEventListener() 來(lái)監(jiān)聽 unload (en-US) 事件,而不是直接給 onunload 賦值。
下面貼我使用的源碼;
3、源碼部分
3.1、方法一:可寫于html頁(yè)面使用(直接使用)
var _beforeUnload_time = 0, _gap_time = 0; window.onunload = function (){ _gap_time = new Date().getTime() - _beforeUnload_time; if(_gap_time <= 10) {//瀏覽器關(guān)閉 window.mgr.signoutRedirect();//這個(gè)mgr是我暴露在window的退出登錄方法 }else{//瀏覽器刷新-chrome刷新 console.log(document.domain); return confirm("確定要離開本系統(tǒng)么?"); } }; window.onbeforeunload = function (){ _beforeUnload_time = new Date().getTime(); };
3.2、方法二:可寫于組件如app.vue
使用(監(jiān)聽事件)
data() { return { gap_time: 0, beforeUnload_time: 0, }; }, methods: { // 關(guān)閉窗口之前執(zhí)行 beforeunloadHandler() { this.beforeUnload_time = new Date().getTime(); }, unloadHandler() { this.gap_time = new Date().getTime() - this.beforeUnload_time; //判斷是窗口關(guān)閉還是刷新 毫秒數(shù)判斷 網(wǎng)上大部分寫的是5 if (this.gap_time <= 10) { mgr.signoutRedirect(); // 退出登錄接口 這里應(yīng)當(dāng)換為個(gè)人的登出方法 } else { console.log(document.domain); return confirm("確定要離開本系統(tǒng)么?"); } }, }, unmounted() {//vue可換為destroyed()生命周期,不過(guò)這個(gè)也可以用 // 移除監(jiān)聽 window.removeEventListener("beforeunload", () => this.beforeunloadHandler()); window.removeEventListener("unload", () => this.unloadHandler()); }, mounted() { // 監(jiān)聽瀏覽器關(guān)閉 window.addEventListener("beforeunload", () => this.beforeunloadHandler()); window.addEventListener("unload", () => this.unloadHandler()); },
參考文章:
??vue關(guān)閉瀏覽器時(shí),觸發(fā)事件,執(zhí)行退出登錄接口
??vue 關(guān)閉瀏覽器清空token (區(qū)分刷新)
到此這篇關(guān)于vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue關(guān)閉瀏覽器退出登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于vuex的數(shù)據(jù)持久化處理方式
這篇文章主要介紹了關(guān)于vuex的數(shù)據(jù)持久化處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10解決vue路由name同名,路由重復(fù)的問(wèn)題
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue.js實(shí)現(xiàn)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能,編輯功能)
這篇文章主要介紹了vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能,編輯功能),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí)
本文主要介紹了ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí),同一父級(jí)下的子節(jié)點(diǎn)單選,又可以選擇多個(gè)不同父級(jí)下的節(jié)點(diǎn),具有一定參考價(jià)值,感興趣的可以了解一下2023-10-10Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼
這篇文章主要介紹了Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05vue在手機(jī)中通過(guò)本機(jī)IP地址訪問(wèn)webApp的方法
這篇文章主要介紹了vue在手機(jī)中通過(guò)本機(jī)IP地址訪問(wèn)webApp的方法,需要的朋友可以參考下2018-08-08