Laravel切换用户登录后如何禁用浏览器返回按钮？

一、覆盖浏览器历史记录，清除受限页面痕迹 #

切换登录成功后，用history.replaceState将当前页面替换掉历史栈中的受限页面记录，这样用户点击返回时会直接跳过受限页面，回到更早的有效页面：

// 登录切换完成后执行
history.replaceState(null, document.title, window.location.href);

如果切换后跳转到了新的首页，也可以在首页加载时执行这段代码，彻底覆盖掉之前的受限页面记录。

二、路由层面拦截权限不足的页面访问 #

如果使用Vue Router、React Router这类路由框架，在全局路由守卫中添加权限校验，就算用户通过返回按钮进入受限页面，也会被直接拦截跳转：
以Vue Router为例：

router.beforeEach((to, from, next) => {
  const currentUser = getCurrentUser(); // 自定义方法，获取当前登录用户信息
  // 判断目标页面需要权限且当前用户无访问权限
  if (to.meta.requiresAuth && !currentUser.canAccess(to.path)) {
    // 跳转到首页，同时替换历史记录，避免返回循环
    next({ path: '/home', replace: true });
  } else {
    next();
  }
});

三、禁用返回按钮（应急方案，不推荐） #

直接监听popstate事件阻止默认返回行为，同时强制跳转到有权限的页面：

// 先添加一条空的历史记录，确保popstate事件能触发
history.pushState(null, document.title, window.location.href);
// 监听返回事件
window.addEventListener('popstate', function(e) {
  e.preventDefault();
  // 强制跳转到首页
  window.location.href = '/home';
});

注意：这种方式会打断用户正常的浏览习惯，仅作为临时应急方案使用。

四、优化新标签页切换的时序问题 #

如果仍想保留新标签页切换的方式，通过监听新标签页加载状态+超时兜底来确保原标签页关闭：

// 打开新标签页
const newTab = window.open('/login-switch', '_blank');
// 监听新标签页加载完成后关闭原标签页
newTab?.addEventListener('load', () => {
  window.close();
});
// 超时兜底，避免监听失败
setTimeout(() => {
  if (newTab && !newTab.closed) {
    window.close();
  }
}, 1200);

内容的提问来源于stack exchange，提问作者Elliott Coe