Vue-router如何阻止已登录用户通过浏览器返回按钮回到登录页？

嘿，我来帮你搞定这个头疼的问题！首先咱们先揪出现有代码里的小bug，再解决浏览器缓存导致的核心问题。

第一步：修正路由守卫的语法与逻辑问题 #

你现有代码里有个明显的语法错误——第二个判断里用了单&（位运算符号），应该改成逻辑与&&。另外，原代码的两个并行if可能会导致多次调用next()，打乱路由逻辑。咱们把它改成更严谨的结构：

router.beforeEach((to, from, next) => {
  // 先获取登录状态，避免重复读取localStorage
  const isLoggedIn = window.localStorage.getItem('info') !== null;

  if (isLoggedIn && to.path === '/login') {
    // 已登录用户访问登录页，跳转到之前的页面；如果是直接输入login路径，就跳首页
    next(from.fullPath || '/');
  } else if (!isLoggedIn && to.path !== '/login') {
    // 未登录用户访问非登录页，强制跳转到登录页
    next('/login');
  } else {
    // 其他情况正常放行
    next();
  }
});

第二步：解决浏览器缓存导致的返回问题 #

为什么改了路由守卫还是没用？因为浏览器会缓存页面，当用户点击返回按钮时，可能直接从缓存加载了之前的登录页，这时候路由守卫可能没触发。咱们在登录页组件里再加一层保障：

在Login.vue组件中添加状态检查逻辑，两种方法任选其一：

方法1：用mounted钩子 #

export default {
  mounted() {
    // 组件挂载时检查，如果已登录就跳走
    if (window.localStorage.getItem('info') !== null) {
      this.$router.push('/'); // 这里可以改成你想让用户跳转的目标页面
    }
  }
}

方法2：用路由的beforeRouteEnter守卫 #

export default {
  beforeRouteEnter(to, from, next) {
    // 进入登录页路由前检查状态
    if (window.localStorage.getItem('info') !== null) {
      next('/');
    } else {
      next();
    }
  }
}

这样一来，即使浏览器从缓存加载了登录页，组件挂载或者路由进入时也会自动检查登录状态，强制跳转到已登录后的页面，彻底堵上这个漏洞。

内容的提问来源于stack exchange，提问作者Matheus Silva