Javascript Vue.js SPA:如果JWT已过期,如何防止浏览器打开缓存版本?

Javascript Vue.js SPA:如果JWT已过期,如何防止浏览器打开缓存版本?,javascript,express,vue.js,jwt,Javascript,Express,Vue.js,Jwt,我有一个无法用Vue.js/Express应用程序解决的问题 程序如下: 未经验证的用户登录到应用程序并接收登录页面。 经过身份验证后,后端将生成并发送一个cookie,其中包含JWT和构建的Vue.js页面的静态内容 随后,在检查JWT有效性的同一后端上调用RESTAPI。当JWT过期时,将返回登录页面的静态内容 它可以正常工作,但是当浏览器关闭然后重新打开时,如果选项卡一直保存在内存中,而JWT在此期间已过期,则最终会得到索引页的缓存版本,而其余请求会在JWT过期后失败 在这种情况下,如何进

我有一个无法用Vue.js/Express应用程序解决的问题

程序如下:

未经验证的用户登录到应用程序并接收登录页面。 经过身份验证后,后端将生成并发送一个cookie,其中包含JWT和构建的Vue.js页面的静态内容

随后,在检查JWT有效性的同一后端上调用RESTAPI。当JWT过期时,将返回登录页面的静态内容

它可以正常工作,但是当浏览器关闭然后重新打开时,如果选项卡一直保存在内存中,而JWT在此期间已过期,则最终会得到索引页的缓存版本,而其余请求会在JWT过期后失败


在这种情况下,如何进入登录页面?谢谢你的帮助。:)

好消息是请求失败了。根据请求-响应,您应该将用户重定向到前端应用程序中的登录页面

以下是场景:


请求=>已验证?index:login

最后我通过禁用后端缓存解决了这个问题:

app.use((req, res, next) => {
  res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private')
  next()
})

vuejs SPA(html、css和前端js)可能会被缓存,但当应用程序加载时,所有数据都将从HTTP调用中获取,因此实际上存在一个可能显示过时数据的实例。如果由于JWT不再有效而导致获取某些数据的第一个HTTP调用失败,您可以将它们重定向到登录页面。如果您通过本地存储在客户端上存储敏感信息,那么我认为您的问题可能需要更详细一些。“如果您第一次调用HTTP获取某些数据失败,因为JWT不再有效,您可以将它们重定向到登录页。”事实上,这就是它的工作方式,直到浏览器关闭然后重新打开(同时JWT已过期)。失败的API请求接收登录页面,但不接收索引页面的主请求。奇怪的是,对索引页面的请求在控制台中没有任何状态(甚至不是我可以理解的304),答案是页面上的标签。。。。如果我在那时刷新页面,没有问题,我会收到登录页面。我明白了,这是一个相当标准的事情,我认为大多数处理这个问题的应用程序在应用程序打开并运行时都会进行相当多的api调用,所以它很快就会崩溃,而不是等待用户与它交互。如果这不是一个他们可以看到信息的问题(不管怎样,他们可以在手前看到),那么我不会尝试解决它,否则您将进入心跳ping的领域,随着您的扩展,这可能会导致负载问题。这显然是假定您没有试图遵守的规则,如果是这样的话,也许心跳是个合理的想法。但同样地,JWT通常意味着相当长的寿命,因此您可能不会在99%的时间内看到过期的效果。