Angular Guard提前完成，未正确检查NgRx Selector值及导航问题

问题分析 #

• 直接使用subscribe监听NgRx Selector时，守卫函数会在订阅回调执行前就完成执行，因为守卫逻辑同步返回结果，无法等待异步的订阅回调。
• 返回of(false)仅能阻止路由激活，但无法触发页面导航跳转。

解决方案代码 #

import { CanActivateFn, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { of } from 'rxjs';
import { mergeMap, take, catchError } from 'rxjs/operators';
import { UserInterface } from './your-user-interface-path';
import { userSelector } from './your-selector-path';

export const isLoggedGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const store = inject(Store);
  const router = inject(Router);

  return store.select(userSelector).pipe(
    // 只取一次状态值，避免持续订阅导致内存泄漏
    take(1),
    mergeMap((user: UserInterface | null) => {
      if (user) {
        // 用户存在，允许激活路由
        return of(true);
      } else {
        // 用户不存在，生成跳转的UrlTree，Angular会自动导航
        return of(router.createUrlTree(['/']));
      }
    }),
    catchError(() => {
      // 发生错误时也导航到指定页面
      return of(router.createUrlTree(['/']));
    })
  );
};

关键说明 #

1. 避免手动订阅：直接返回NgRx Selector的Observable流，Angular会自动处理订阅并等待流的结果，确保守卫在状态值返回后再判断路由是否激活。
2. 使用UrlTree实现跳转：当状态不满足条件时，返回router.createUrlTree()生成的UrlTree对象（包裹在Observable中），Angular会自动触发导航到目标路由，无需手动调用router.navigate()。
3. 添加take(1)：Selector默认是持续的数据流，添加take(1)确保只获取一次状态值后就完成流，避免不必要的内存占用。

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