前端如何清除浏览器页面缓存

甲方提方案让坐实时权限 让在一级路由出口处写请求 并且存放到sessionstorage, 再从本地缓存拿到vuex,这样虽然做到了F5刷新页面可以拿到最新的权限, 但是如果用户在浏览一个路由级别的页面时,管理员卸载这个路由权限用户刷新之后还可以访问这个路由级别的页面,而其他卸载的路由级别页面都已被卸载。怀疑是浏览器页面缓存问题

普通刷新不会清掉sessionstorage,所以每次获取权限时候,应该要清掉重新设置应该就可以了

所以你卸载 权限时也要用代码 执行 sessionstorage.clear() 或者 删除 关于权限的 存储。执行clear是所有的都清楚,鉴于 你可能存了别的东西所以 还是 只删除 关于权限的就行了。因为 会删除 ,所以 你每次读 本地时要做个判断
if(local.sessionstorage.getItem("xx")){
// 存在再 转换使用 防止报错
}

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7781619
  • 以下回答来自chatgpt:

    可以尝试以下两种方式来解决页面缓存问题:

    1. 在请求中添加随机数参数或时间戳参数,强制浏览器重新发送请求,避免使用缓存内容。具体操作如下:
    // 在请求URL后添加随机数或时间戳参数
    let url = 'http://example.com/api/data?timestamp=' + new Date().getTime(); 
    axios.get(url).then(res => {
      // 处理请求数据
    })
    
    1. 使用HTTP缓存控制头,设置缓存过期时间以及缓存类型,可以在一定程度上控制浏览器的缓存行为。具体操作如下:
    // 设置缓存控制头
    router.afterEach((to, from) => {
      const isBack = from.name && to.meta.isBack !== false;
      if(isBack) {
        // 如果是后退操作,则设置缓存过期时间为0秒
        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
        res.setHeader('Pragma', 'no-cache');
        res.setHeader('Expires', 0);
      } else {
        // 如果不是后退操作,则设置缓存过期时间为60秒
        res.setHeader('Cache-Control', 'max-age=60')
      }
    })
    

    这两种方式可以根据具体情况进行选择和组合使用,解决浏览器页面缓存的问题。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^