如何在用户登录/登出后清除bfcache，同时保留其他场景缓存？

针对你遇到的登录/登出后浏览器回退加载bfcache中敏感页面的问题，以下是几个精准可行的方案，既能清除权限变更后的bfcache影响，又不破坏正常场景的bfcache使用：

方案1：权限变更后绑定beforeunload事件（根源阻止存入bfcache） #

浏览器会将绑定了非空beforeunload事件处理函数的页面排除在bfcache之外，我们可以仅在用户完成登录/登出操作后，给当前页面绑定该事件，其他场景不触发绑定：

// 登录/登出成功后执行此函数
function blockBfcacheAfterAuthChange() {
  const handleBeforeUnload = (e) => {
    // 无需弹出提示，只需绑定函数即可让浏览器跳过bfcache存储
    e.returnValue = ''; // 部分浏览器需要此设置避免默认提示
  };
  // 先移除已有监听，避免重复绑定
  window.removeEventListener('beforeunload', handleBeforeUnload);
  window.addEventListener('beforeunload', handleBeforeUnload);
}

• 优势：从根源上阻止敏感页面被存入bfcache，无页面闪显问题，仅影响权限变更后的页面，其他页面bfcache正常工作。

方案2：优化pageshow事件处理（解决闪显问题） #

如果无法避免页面被存入bfcache，可以通过瞬间隐藏页面内容的方式解决敏感信息闪显：

// 页面初始化时绑定事件
window.addEventListener('pageshow', (e) => {
  if (e.persisted) { // 页面从bfcache恢复
    // 立即隐藏整个页面，杜绝闪显
    document.documentElement.style.visibility = 'hidden';
    
    // 检查当前用户权限（从本地存储或接口获取）
    const isLoggedIn = localStorage.getItem('authToken') !== null;
    if (!isLoggedIn) {
      // 权限不足，跳转至登录页
      window.location.href = '/login';
    } else {
      // 权限正常，恢复页面显示
      document.documentElement.style.visibility = 'visible';
    }
  }
});

• 优势：无需修改缓存策略，通过前端拦截快速处理权限校验，彻底避免敏感内容暴露。

方案3：SPA路由层面拦截（针对单页应用） #

如果是单页应用，可以在路由守卫中增加bfcache恢复的权限校验：
以Vue Router为例：

router.beforeEach((to, from, next) => {
  // 检测是否通过历史记录导航（回退/前进，即从bfcache恢复）
  if (window.performance?.navigation.type === 2) {
    const isLoggedIn = localStorage.getItem('authToken') !== null;
    // 校验当前路由是否需要登录，且用户未登录
    if (to.meta.requiresAuth && !isLoggedIn) {
      next('/login');
    } else {
      next();
    }
  } else {
    next();
  }
});

• 结合方案1使用：在登录/登出时给需要权限的页面绑定beforeunload，双重保障避免bfcache问题。

内容的提问来源于stack exchange，提问作者Patrick Miah