vue清除瀏覽器全部cookie的問題及解決方法(絕對有效!)
更新時間：2023年06月19日 11:56:44 作者：byte_麻雀.
最近項目要實現(xiàn)關(guān)閉瀏覽器清除用戶緩存的功能,下面這篇文章主要給大家介紹了關(guān)于vue清除瀏覽器全部cookie的問題及解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
請仔細觀察你的瀏覽器cookie~
1、問題描述
我們在日常開發(fā)中，有本地調(diào)試，有多個服務(wù)器的線上調(diào)試部署。從中我觀察到，每次使用同一瀏覽器，如果再次登錄時我們沒有清理緩存，會有很多匪夷所思的問題。比如：token在cookie里保存，導致登錄失效。多個角色登錄時明明token已經(jīng)更新，但使用的還是舊的token導致登錄失敗等等…
2、思路以及遇到問題
然后我就想到了一個簡單粗暴的方法，在單點登錄時直接刪除全部cookie然后獲取新的token，但是出現(xiàn)了刪除不了全部，只能刪除當前域（本地）的cookie…
3、問題解決（曬出全部代碼以及注釋）
（1）問題的核心原因：
不同域（domain）無法全部清除
（2）解決問題的全部代碼與注釋：
delAllCookie() {
//清空全部cookie
var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
if (keys) {
for (var i = keys.length; i--; ) {
document.cookie =
keys[i] + "=0;path=/;expires=" + new Date(0).toUTCString(); //清除當前域名下
document.cookie =
keys[i] +
"=0;path=/;domain=" +
document.domain +
";expires=" +
new Date(0).toUTCString();
document.cookie =
keys[i] +
"=0;path=示例：/index.vue（不同域的path,也就是你清除不了的cookie）;domain=示例：10.10.10.208（不同域的domain,也就是你清除不了的cookie）;expires=" +
new Date(0).toUTCString();
**document.cookie可加多條?。。?！**
}
}
},4、總結(jié)問題
描述問題時看似簡單，但其實在排查現(xiàn)實問題時也是需要清晰思路的，它會造成很多*疼的問題。當然在我們不同的現(xiàn)實開發(fā)場景，具體問題具體分析。
到此這篇關(guān)于vue清除瀏覽器全部cookie的問題及解決方法的文章就介紹到這了,更多相關(guān)vue清除瀏覽器全部cookie內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue.js高德地圖實現(xiàn)熱點圖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue商城中商品“篩選器”功能的實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
在Vue的mounted中仍然加載渲染不出echarts的方法問題
這篇文章主要介紹了在Vue的mounted中仍然加載渲染不出echarts的方法問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關(guān)于Vue中this.$router和this.$route的區(qū)別及push()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-09-09
vue?動態(tài)路由component?傳遞變量報錯問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
dhtmlxGantt是一個強大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項任務(wù)和進度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實現(xiàn)甘特圖的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-04-04
Vue生產(chǎn)環(huán)境如何自動屏蔽console
這篇文章主要介紹了Vue生產(chǎn)環(huán)境如何自動屏蔽console問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
最近做項目結(jié)構(gòu)優(yōu)化,前端項目都是部署在nginx上,想實現(xiàn)同一個端口可以訪問多個前端項目,所以就有了本文,這篇文章主要給大家介紹了關(guān)于Nginx同一端口部署多個前后端分離的vue項目的相關(guān)資料,需要的朋友可以參考下2023-10-10
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧2018-03-03