vue新窗口/标签页vuex不共享问题

wenjing:)

已于 2024-04-16 23:18:47 修改

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2023-07-24 18:39:42 首次发布

文章描述了一个前端开发中遇到的问题，即在Vuex中存储的token无法在新窗口的请求中被携带。由于Vuex的数据在标签页间不共享，新打开的页面无法访问到原有的token。提出的解决方案是使用localStorage或cookie来存储token，以便在新窗口的请求中能正确发送token。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在有一个需求：所有向后端发出的请求都需要带token。所以打算将token放到vuex中存储，在每次请求响应的时候将token携带发过去。

但遇到这么一个问题：在主页中通过按钮打开一个新窗口（window.open），这个新窗口向后端发送请求时没有携带token！！！

const { href } = this.$router.resolve({
  path: '/newLinkPage',
  query: {
  }
})
window.open(href, '_blank')

原因是因为vuex是保存在标签隔离的内存空间里面的数据，新标签与之前的标签页不是同一个vue实例，开启了新标签页后可以认为是重新走了一遍Vue页面的生命周期，vuex的数据在新打开的页面就没了。

解决思路：可以使用localStorage或者cookie