解决浏览器打开已关闭页面读取缓存页面,导致执行 Ajax 而不是跳转登录页面
问题描述:
一个后台项目,用户访问了页面 domain.com/a/c
,项目中所有页面的 Header
里缓存选项都是 Cache-control: private
(这个就意味着浏览器会缓存页面);然后关闭浏览器,用了浏览器 Ctrl+Shift+T
重新打开已经关闭的页面,这时候网页的内容直接获取的是缓存内容并不直接访问服务器,但是会执行页面中的 JS
代码,项目中有 JS
访问同域的资源,因为没登陆账号,这部分会 302
到登录界面导致报错。
问题解决:
还是从浏览器的页面缓存入手,把项目中响应头缓存控制改为不允许缓存,Cache-control: no-store, no-cache, must-revalidate
。
疑问:
虽然上面的方法解决了不自动跳转登录页的问题,但是页面得不到缓存,感觉也挺耗费资源的。比较好奇像单页应用是怎么做的?
你所说的项目页面是静态 html,还是动态页面?
@Hachiko 动态页面,就后台的一个Dashbord页面
@皮蛋 动态页面的话,后端直接判断有无 session ,无 session 跳转到 登录页面,这样不更好。 SPA 页面,这种问题的处理,请求加拦截器,针对这种登录失效的特殊状态要做处理,然后跳转到登录页面
@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
代码报错的问题。当然这个问题并不算一个很严重的问题,只是在很少的情况下发生。这个问题就是让我对
HTTP Header
里Cache-control
这个属性有了进一步的了解。我对单页应用的疑问也是针对单页应用对动态资源会不会设置
Cache-control
的值为no-cache
,还是说所有的动态资源都会默认设置的是no-cache
, 我这个项目用的框架是TP
默认的值private
,所以还是挺疑惑的。js可以先判断登录状态再执行的吧,用得着搞那么复杂吗?