Nuxt 3：全局中间件与插件陷入无限循环问题排查

问题根源 #

• 全局中间件无拦截判断：你编写的全局中间件会在每次路由切换、页面初始化（包括客户端 hydration 阶段）时执行，且未添加任何判断逻辑，每次都会调用getUser发起API请求。若没有页面跳转却持续发请求，大概率是getUser内部逻辑触发了响应式更新，间接导致中间件被重复触发（比如store状态更新后，关联逻辑重新触发了路由相关操作）。
• getUser未做缓存处理：如果getUser用useFetch或useAsyncData实现时，未设置固定的请求key、未开启缓存，每次调用都会重新发起请求。加上全局中间件的高频执行，就会出现持续请求的情况。
• 潜在的循环触发逻辑：如果getUser获取用户信息失败后触发了路由重定向（比如跳转到登录页），而登录页又会触发全局中间件，就会形成循环；或者store状态更新后，某些组件监听状态并强制刷新路由，也会反复触发中间件。

解决办法 #

• 给中间件添加判断逻辑：先检查store里是否已有用户数据，同时确认Cookie中存在JWT Token，再发起请求：

export default defineNuxtRouteMiddleware(async (to, from) => {
  const { getUser, user } = useAuthStore();
  const jwtToken = useCookie('jwt').value;
  
  // 仅当无用户数据且存在Token时才请求
  if (!user.value && jwtToken) {
    await getUser();
  }
})

• 优化getUser的缓存机制：用useAsyncData实现时设置固定key，开启缓存，避免重复请求：

// 在useAuthStore的getUser方法中
async function getUser() {
  const jwt = useCookie('jwt').value;
  if (!jwt) return;
  
  const { data } = await useAsyncData('auth-user', () => 
    $fetch('/api/user', {
      headers: { Authorization: `Bearer ${jwt}` }
    }),
    {
      watch: false, // 关闭自动监听依赖，避免不必要的重请求
      initialCache: true // 启用初始缓存，复用已有请求结果
    }
  );
  
  if (data.value) {
    user.value = data.value;
  }
}

• 排查循环触发点：检查getUser或其他关联逻辑中是否有路由跳转代码，添加条件判断避免重复跳转；同时确认组件中没有监听用户状态后强制刷新路由的逻辑。

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