Nuxt路由中间件无token跳转认证页出现闪屏问题求助

核心原因 #

当前代码使用router.push()进行跳转，这属于客户端异步跳转，会先完成原路由的页面渲染再执行跳转逻辑，因此出现闪屏。另外，依赖客户端store获取token的方式，在服务端渲染或页面初始加载阶段，可能还未完成状态hydration，导致token判断时机滞后，进一步加剧闪屏问题。

修复方案 #

1. 用navigateTo替代router.push实现同步重定向 #

在Nuxt路由中间件中，返回navigateTo()会直接中断当前导航流程，提前触发重定向，避免原页面渲染：

import { defaultStore } from "@/store/default";
import { navigateTo } from 'nuxt/app';

export default defineNuxtRouteMiddleware((to, from) => {
  const store = defaultStore();
  const token = store?.getUserDetails?.authToken;
  const loginURL = "/auth";

  const isAllowedRoute =
    to.path.startsWith("/ko/auth") ||
    to.path.startsWith("/auth") ||
    to.path.startsWith('/setup');

  if (isAllowedRoute) return;

  // 无token且目标不是登录页时，返回navigateTo中断当前导航
  if (!token && to.path !== loginURL) {
    return navigateTo(loginURL);
  }
});

2. 将中间件设置为全局生效 #

把中间件文件命名为auth.global.ts/auth.global.js并放在middleware/目录下，使其成为全局中间件，在所有路由导航启动前就执行拦截逻辑，而非仅针对单个页面。

3. 优化token获取逻辑（解决初始加载时token空白问题） #

如果token存储在cookie中，直接从cookie读取token，避免依赖客户端store的hydration过程，确保服务端和客户端都能及时获取到token值：

import { useCookie } from 'nuxt/app';
import { navigateTo } from 'nuxt/app';

export default defineNuxtRouteMiddleware((to, from) => {
  // 直接从cookie读取token，服务端/客户端均可访问
  const authToken = useCookie('auth_token');
  const loginURL = "/auth";

  const isAllowedRoute =
    to.path.startsWith("/ko/auth") ||
    to.path.startsWith("/auth") ||
    to.path.startsWith('/setup');

  if (isAllowedRoute) return;

  if (!authToken.value && to.path !== loginURL) {
    return navigateTo(loginURL);
  }
});

4. 可选：禁用登录页的服务端渲染 #

若登录页不需要SSR支持，可在auth页面组件中添加配置，减少服务端渲染耗时：

<script setup>
definePageMeta({
  ssr: false
});
</script>

内容的提问来源于stack exchange，提问作者Arjun Pandi