js-cookie二次过期后二次设置失效

本文详细描述了在Vue项目中使用js-cookie存储token时遇到的问题,当token过期后,尝试重新设置cookie失败,导致无法正常登录。问题根源在于使用toUTCString转换过期时间,引发了时区问题。解决方案是改用max-age属性来设置cookie过期时间,并注意属性值为字符串。修复后,cookie设置和读取恢复正常。
摘要由CSDN通过智能技术生成

js-cookie在vue使用中过期后无法二次设置

vue中使用js-cookie储存token令牌,token过期后点击任何路由跳转登录界面,点击登录后重新获取token,继续使用cookiejs插入token失效,导致其他初始化接口获取不到token值。

问题描述:

在本人开发的vue项目中,使用了统一的接口拦截,接口请求前通过cookie获取token属性,然后插入请求头。

请求拦截代码如下:
在这里插入图片描述
之前使用js-cookie设置token值,token设置过期时间用的是expires属性设置,设置为当前时间加2小时,在有一次上午出门后,下午接着做项目时点击界面,跳转到登录界面,点击登录后一直无法跳转路由,经查看是token没有保存,界面初始化失败。注:界面刷新后可以正常储存token值并进行登录
在这里插入图片描述

使用方式

原因分析:

通过追踪js-cookie及自己使用原生js储存token信息最终定位到在js-cookie储存cookie过程中设置过期时间使用了toUTCString,将本地时间改为了国际时间,也就是时区为0
在这里插入图片描述

解决方案:

个人猜想是时区问题,导致浏览器的cookie中token值清空,但实际可能在硬盘中没有过期。解决方法个人使用了cookie中的max-age属性,也可以实现cookie失效功能。
就是需要注意cookie.js中的属性比如都为字符串,所以inFifteenMinutes 值最好加个空字符串拼接不然报错,证据如下,会执行split方法,如果不是字符串直接报错
在这里插入图片描述

// An highlighted block
return Cookies.set(TokenKey, token, { "max-age": inFifteenMinutes })

相关说明:

目前还不理解为什么储存cookie时过期时间要使用toTUCString改变格式,第一次写博客,如果有误,大佬轻点喷

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值