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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • element 表格嵌套表单验证指定行的操作方法

    element 表格嵌套表单验证指定行的操作方法

    这篇文章主要介绍了element 表格嵌套表单验证指定行的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • vue2+elementui的el-table固定列会遮住横向滚动条及错位问题解决方案

    vue2+elementui的el-table固定列会遮住横向滚动条及错位问题解决方案

    这篇文章主要介绍了vue2+elementui的el-table固定列会遮住横向滚动条及错位问题解决方案,主要解决固定列错位后, 接下来就是把固定列往上提滚动条的高度就不会影响了,需要的朋友可以参考下
    2024-01-01
  • vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    最近遇到个问题,后台一次性返回2万条列表数据并且需求要求所有数据必须全部展示,不能做假分页,怎么操作呢,下面通过本文介绍下vue最强table vxe-table 虚拟滚动列表 前端导出问题,感兴趣的朋友一起看看吧
    2023-10-10
  • 浅谈axios中取消请求及阻止重复请求的方法

    浅谈axios中取消请求及阻止重复请求的方法

    在实际项目中,我们可能需要对请求进行“防抖”处理。本文主要实现axios中取消请求及阻止重复请求,具有一定的参考价值,感兴趣的可以了解一下
    2021-08-08
  • Vue隐藏显示、只读实例代码

    Vue隐藏显示、只读实例代码

    本文通过实例代码给大家介绍了Vue隐藏显示、只读功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • Vue利用computed解决单项数据流的问题

    Vue利用computed解决单项数据流的问题

    Vue是一个非常流行和强大的前端框架,它让我们可以用简洁和优雅的方式来构建用户界面,但是,Vue也有一些需要注意和掌握的细节和技巧,今天我们来分享一个Vue中非常经典的问题,也是一个非常实用的技巧,Vue利用computed解决单项数据流,需要的朋友可以参考下
    2023-08-08
  • Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

    Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

    vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。这篇文章给大家介绍了VuePress搭建个人博客的过程,感兴趣的朋友一起看看吧
    2018-04-04
  • jdk1.8+vue elementui实现多级菜单功能

    jdk1.8+vue elementui实现多级菜单功能

    这篇文章主要介绍了jdk1.8+vue elementui实现多级菜单功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • Vue编程格式化代码属性自动换行问题

    Vue编程格式化代码属性自动换行问题

    这篇文章主要为大家介绍了Vue编程格式化代码属性及自动换行问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • vue.js开发实现全局调用的MessageBox组件实例代码

    vue.js开发实现全局调用的MessageBox组件实例代码

    最近学习了Vue.js,感觉组件这个地方知识点挺多的,而且很重要,所以决定记录下,下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-11-11

最新评论