Vue3路由守卫调用Laravel11 API时陷入无限循环求助

你的代码触发无限循环和页面无法渲染的核心原因有三个：

• authStore.getAuthUser()是异步请求，但你没加await等待结果，导致代码还没拿到服务器响应就执行判断逻辑，状态一直处于未认证，反复触发请求。
• 没有设置「身份验证中」的状态标记，路由守卫每次触发都会重新发起认证请求，形成循环。
• 登录页的路由判断逻辑有漏洞，跳转到login时可能再次触发不必要的认证检查。

1. 完善Auth Store的认证逻辑 #

先确保getAuthUser是异步函数，并且添加isCheckingAuth状态标记，避免重复发起请求：

// stores/authStore.js
export const useAuthStore = defineStore('auth', {
  state: () => ({
    currentUser: null,
    isCheckingAuth: false // 添加状态标记
  }),
  actions: {
    async getAuthUser() {
      if (this.isCheckingAuth) return; // 正在请求时直接返回，避免重复调用
      this.isCheckingAuth = true;
      try {
        const response = await axios.get('/api/user');
        this.currentUser = response.data.user;
        return response;
      } catch (error) {
        this.currentUser = null;
        throw error;
      } finally {
        this.isCheckingAuth = false; // 请求结束后重置状态
      }
    }
  }
});

2. 修正路由守卫逻辑 #

添加await等待认证请求完成，同时优化判断逻辑，避免登录页触发不必要检查：

router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore();
  const isAuthenticated = authStore.currentUser !== null;

  // 优先处理登录页：已认证用户访问login直接跳首页
  if (to.name === 'login') {
    return isAuthenticated ? next({ name: 'home' }) : next();
  }

  // 处理需要认证的路由
  if (to.meta.requiresAuth) {
    if (!isAuthenticated) {
      try {
        await authStore.getAuthUser();
        // 请求完成后再次判断认证状态
        authStore.currentUser ? next() : next({ name: 'login' });
      } catch (error) {
        console.log('认证检查失败:', error);
        next({ name: 'login' });
      }
    } else {
      next();
    }
  } else {
    // 不需要认证的路由直接放行
    next();
  }
});

3. 确认路由meta配置正确 #

检查路由配置，确保需要认证的页面标记requiresAuth: true，登录页不要添加该标记：

// 路由示例
const routes = [
  {
    path: '/login',
    name: 'login',
    component: LoginComponent
    // 不要设置requiresAuth
  },
  {
    path: '/home',
    name: 'home',
    component: HomeComponent,
    meta: { requiresAuth: true }
  }
];

• isCheckingAuth状态从根源避免了同一时间重复发起认证请求，打破无限请求循环。
• await确保判断逻辑基于真实的服务器响应结果，不会因为异步请求未完成导致状态误判。
• 优先处理登录页逻辑，避免跳转到login后再次触发认证检查，切断循环链。

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