vue清除浏览器全部cookie的问题及解决方法(绝对有效!)

 更新时间:2023年06月19日 11:56:44   作者:byte_麻雀.  
最近项目要实现关闭浏览器清除用户缓存的功能,下面这篇文章主要给大家介绍了关于vue清除浏览器全部cookie的问题及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

请仔细观察你的浏览器cookie~

1、问题描述

我们在日常开发中,有本地调试,有多个服务器的线上调试部署。从中我观察到,每次使用同一浏览器,如果再次登录时我们没有清理缓存,会有很多匪夷所思的问题。比如:token在cookie里保存,导致登录失效。多个角色登录时明明token已经更新,但使用的还是旧的token导致登录失败等等…

2、思路以及遇到问题

然后我就想到了一个简单粗暴的方法,在单点登录时直接删除全部cookie然后获取新的token但是出现了删除不了全部,只能删除当前域(本地)的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、总结问题

描述问题时看似简单,但其实在排查现实问题时也是需要清晰思路的,它会造成很多*疼的问题。当然在我们不同的现实开发场景,具体问题具体分析。

到此这篇关于vue清除浏览器全部cookie的问题及解决方法的文章就介绍到这了,更多相关vue清除浏览器全部cookie内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue.js高德地图实现热点图代码实例

    vue.js高德地图实现热点图代码实例

    这篇文章主要介绍了vue.js高德地图实现热点图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue商城中商品“筛选器”功能的实现代码

    vue商城中商品“筛选器”功能的实现代码

    这篇文章主要介绍了vue商城中商品“筛选器”功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 在Vue的mounted中仍然加载渲染不出echarts的方法问题

    在Vue的mounted中仍然加载渲染不出echarts的方法问题

    这篇文章主要介绍了在Vue的mounted中仍然加载渲染不出echarts的方法问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue中this.$router和this.$route的区别及push()方法

    Vue中this.$router和this.$route的区别及push()方法

    这篇文章主要给大家介绍了关于Vue中this.$router和this.$route的区别及push()方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue3 element-plus实现图片预览功能实例

    vue3 element-plus实现图片预览功能实例

    这篇文章主要给大家介绍了关于vue3 element-plus实现图片预览功能的相关资料,在项目中我们经常会碰到图片预览的功能需求,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue 动态路由component 传递变量报错问题解决

    vue 动态路由component 传递变量报错问题解决

    这篇文章主要为大家介绍了vue 动态路由component 传递变量报错问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 前端vue实现甘特图功能

    前端vue实现甘特图功能

    dhtmlxGantt是一个强大的JavaScript Gantt图表库,提供易于使用、高度可自定义的Gantt图表组件,它支持多项任务和进度条,以及多种列和行布局,可用于创建各种类型的时间线和计划表,本文给大家介绍前端vue实现甘特图的相关知识,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • Vue生产环境如何自动屏蔽console

    Vue生产环境如何自动屏蔽console

    这篇文章主要介绍了Vue生产环境如何自动屏蔽console问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Nginx同一端口部署多个前后端分离的vue项目完整步骤

    Nginx同一端口部署多个前后端分离的vue项目完整步骤

    最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目,所以就有了本文,这篇文章主要给大家介绍了关于Nginx同一端口部署多个前后端分离的vue项目的相关资料,需要的朋友可以参考下
    2023-10-10
  • mpvue中配置vuex并持久化到本地Storage图文教程解析

    mpvue中配置vuex并持久化到本地Storage图文教程解析

    这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细,需要的朋友参考下吧
    2018-03-03

最新评论