Angular路由守卫路由直接访问时页面无限加载问题排查

直接访问受Angular路由守卫保护的路由时页面陷入无限加载，核心问题出在守卫代码的语法和逻辑处理上，具体如下：

• 语法错误：map操作符的闭合括号后多了一个分号，导致Observable无法正常返回，守卫一直处于等待状态，页面也就停留在加载中。
• 副作用处理不当：在map操作符里执行router.navigate这类副作用操作不符合RxJS的设计规范，map应仅负责转换值，导航逻辑应该交给tap操作符处理。
• 可能缺少初始值：如果authService.isAuthenticated$没有初始值（比如不是BehaviorSubject或未设置初始状态），take(1)会一直等待Observable发出值，导致守卫永远不返回结果。

修复后的守卫代码 #

import { inject, PLATFORM_ID } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { take, map, tap } from 'rxjs';
import { AuthServiceService } from '../../services/authentication-authorization/auth-service.service';

export const controlPanelGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthServiceService);
  const router = inject(Router);

  return authService.isAuthenticated$.pipe(
    take(1),
    tap(isLoggedIn => {
      if (!isLoggedIn) {
        router.navigate(['/iniciar-sesion']);
      }
    }),
    map(isLoggedIn => isLoggedIn)
  );
};

额外注意事项 #

• 确保AuthServiceService中的isAuthenticated$使用BehaviorSubject并设置初始值（例如new BehaviorSubject<boolean>(false)），这样take(1)能立即拿到初始状态，避免无等待。
• 检查路由配置，确认/iniciar-sesion路由没有被同一个守卫保护，防止出现循环导航的情况。

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