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