Angular路由父守卫跳转子路由无限触发，如何让checkLogin仅调用一次

问题根因 #

AuthGuard触发两次的本质原因是两次导航触发了父路由守卫的重复执行：

1. 第一次访问根路径/，匹配父路由''触发AuthGuard执行
2. 守卫校验通过后返回跳转到/{userId}的UrlTree，Angular发起新的导航，新路径仍然匹配父路由''，导致AuthGuard被第二次触发
   你添加的根路径判断避免了无限循环，但不会减少checkLogin的调用次数。

最优解决方案：给登录状态加缓存 #

直接在AuthService里对checkLogin的校验结果做内存缓存，同一次页面会话内只要校验过一次，后续调用直接返回缓存结果，就算守卫多次执行也不会重复触发校验逻辑，侵入性最小且能提升全局性能：

// AuthService 新增缓存逻辑
@Injectable({ providedIn: 'root' })
export class AuthService {
  // null 代表还未做过登录校验
  private loginStatusCache: boolean | null = null;

  async checkLogin(): Promise<boolean> {
    // 已有缓存直接返回，无需重复校验
    if (this.loginStatusCache !== null) {
      return this.loginStatusCache;
    }
    // 保留原有登录校验逻辑：调后端接口、读localStorage等
    const isLoggedIn = await 原有校验逻辑();
    // 缓存校验结果
    this.loginStatusCache = isLoggedIn;
    return isLoggedIn;
  }

  // 登录、登出时同步更新缓存，保证状态一致
  login() {
    // 原有登录逻辑
    this.loginStatusCache = true;
  }

  logout() {
    // 原有登出逻辑
    this.loginStatusCache = false;
  }
}

可选优化方案：调整路由配置 #

如果不想用缓存，也可以调整守卫挂载范围避免重复执行：

• 把AuthGuard从父路由移到子路由:userId上，只做登录校验
• 父路由单独加一个轻量跳转守卫，仅处理根路径跳转逻辑，不需要调用checkLogin，跳转后子路由会自动触发登录校验

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