解决浏览器打开已关闭页面读取缓存页面,导致执行 Ajax 而不是跳转登录页面

问题描述:

一个后台项目,用户访问了页面 domain.com/a/c,项目中所有页面的 Header 里缓存选项都是 Cache-control: private(这个就意味着浏览器会缓存页面);然后关闭浏览器,用了浏览器 Ctrl+Shift+T 重新打开已经关闭的页面,这时候网页的内容直接获取的是缓存内容并不直接访问服务器,但是会执行页面中的 JS 代码,项目中有 JS 访问同域的资源,因为没登陆账号,这部分会 302 到登录界面导致报错。

问题解决:

还是从浏览器的页面缓存入手,把项目中响应头缓存控制改为不允许缓存,
Cache-control: no-store, no-cache, must-revalidate

疑问:

虽然上面的方法解决了不自动跳转登录页的问题,但是页面得不到缓存,感觉也挺耗费资源的。比较好奇像单页应用是怎么做的?

参考链接

  1. “Re open last closed tab” causing to show last ajax request content
讨论数量: 5

你所说的项目页面是静态 html,还是动态页面?

2年前 评论

@Hachiko 动态页面,就后台的一个Dashbord页面

2年前 评论

@皮蛋 动态页面的话,后端直接判断有无 session ,无 session 跳转到 登录页面,这样不更好。 SPA 页面,这种问题的处理,请求加拦截器,针对这种登录失效的特殊状态要做处理,然后跳转到登录页面

2年前 评论

@Hachiko session过期判断是做了的,只是在特殊情况下会出现我说的问题。

后面有点长,不知道有没有解释清楚我说的问题,非常感谢你的回复。

就是你访问了某个页面 domain.com/a/b 然后关闭浏览器(这时候站点的登录信息失效,再打开就需要重新登录),然后你用浏览器的 Ctrl+Shift+T 打开最近关闭的页面,浏览器就会恢复 domain.com/a/b 这个页面,但是在没有设置 Cache-control: no-cache 的情况下浏览器在上次访问之后会缓存 domain.com/a/b 这个页面在本地,这时候你恢复上次关闭的页面,浏览器就不会去访问 domain.com/a/b 而是直接读取本地缓存的页面内容,但是缓存页面中的 JS 代码会被浏览器执行,如果 JS 代码里有访问 domain.com/a/c (需要登录后才可以访问),那这时候这个访问的资源是不能正常获取的,就会出现 JS 代码报错的问题。

Cache-control 几个常用值的含义,出现我说的问题的时候值是 private
public
表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存,即使是通常不可缓存的内容。(例如:1.该响应没有max-age指令或Expires消息头;2. 该响应对应的请求方法是 POST 。)
private
表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)。私有缓存可以缓存响应内容,比如:对应用户的本地浏览器。
no-cache
在发布缓存副本之前,强制要求缓存把请求提交给原始服务器进行验证(协商缓存验证)。
no-store
缓存不应存储有关客户端请求或服务器响应的任何内容,即不使用任何缓存。

当然这个问题并不算一个很严重的问题,只是在很少的情况下发生。这个问题就是让我对 HTTP HeaderCache-control 这个属性有了进一步的了解。

我对单页应用的疑问也是针对单页应用对动态资源会不会设置 Cache-control 的值为 no-cache ,还是说所有的动态资源都会默认设置的是 no-cache, 我这个项目用的框架是 TP 默认的值 private,所以还是挺疑惑的。

2年前 评论
Hachiko 2年前

js可以先判断登录状态再执行的吧,用得着搞那么复杂吗?

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!