Vue Router未认证时页面先渲染再跳转登录页的问题排查与解决

1. 路由重定向逻辑写错了：你这段代码里，当用户未登录且访问的不是登录页时，只是调用了next()，没指定跳转到登录页的路径，结果路由会继续往目标页面走，页面先渲染出来，之后才可能触发跳转，就出现了先显示当前页再跳登录页的情况。
2. 路径判断有误：判断条件里的to.path !== "login"少了开头的斜杠，实际登录页路径应该是/login，这会导致这个判断根本不生效，比如用户在/home未登录时，不会触发重定向逻辑。
3. 布局修改时机不对：在路由守卫里直接修改布局变量appContentLayoutNav.value，这些修改会在路由跳转完成前就生效，目标页面的布局先渲染出来，之后才跳转到登录页。

1. 修正路由守卫的认证拦截逻辑 #

调整beforeEach里的认证判断部分，确保未登录用户直接重定向到登录页，并且路径判断准确：

router.beforeEach((to, _, next) => {
  const authStore = useAuth();
  const isLoggedIn = isUserLoggedIn();

  // 优先处理认证拦截，别的逻辑往后放
  if (!isLoggedIn) {
    // 未登录且当前不是登录页，直接跳登录页
    if (to.path !== '/login') {
      authStore.removeTokens();
      next('/login');
      return; // 终止后续代码执行，避免多余操作
    }
    // 未登录但访问的是登录页，允许进入
    next();
    return;
  }

  // 只有已登录状态才处理布局和logo
  appContentLayoutNav.value = to.path === '/home' 
    ? AppContentLayoutNav.Landing 
    : AppContentLayoutNav.Vertical;
  appLogo.value = h("div", { innerHTML: logo });

  next();
});

2. 核心优化点 #

• 用next('/login')替代单纯的next()：这会直接中断当前路由跳转，发起登录页的新路由请求，从根源上阻止目标页面的渲染。
• 把认证逻辑放在最前面：未登录时不会执行任何布局修改代码，避免目标页面的布局提前渲染。
• 简化布局判断：用三元表达式减少冗余代码，逻辑更清晰。

内容的提问来源于stack exchange，提问作者amir tbi