Angular 8 canActivate如何返回Subject对应的Observable<boolean>并等待认证结果

方案1：调整AuthService流设计，让权限判定等待服务端返回 #

核心思路是替换普通Subject为ReplaySubject，同时保证isLoggedIn方法返回的流一定会在拿到服务端结果后发射值，不会无限等待。

第一步：修改AuthService代码 #

import { ReplaySubject, first, catchError, throwError, of } from 'rxjs'; // 按需导入缺少的操作符

export class AuthService {
    public readonly INITIAL_PATH = '/app/dashboard';
    public readonly LOGIN_PATH = '/login';

    // 替换为ReplaySubject，缓存最近1次用户状态，无默认初始值，避免BehaviorSubject初始值误判问题
    private loggedUserSubject: ReplaySubject<User | null> = new ReplaySubject(1);
    public loggedUser: Observable<User | null> = this.loggedUserSubject.asObservable();

    constructor(
        private apiService: ApiService,
        private http: HttpClient,
        private router: Router,
        private csrfService: CsrfService,
    ) {
        this.getCurrentUser().subscribe(); // 初始调用拉取用户
    }

    getCurrentUser(): Observable<User> {
        return this.http.get<User>(`${config.authUrl}/user`)
            .pipe(
                tap(user => {
                    this.loggedUserSubject.next(user);
                }),
                catchError(err => {
                    // 请求失败（未登录/认证失效）时主动发射null标识未登录状态
                    this.loggedUserSubject.next(null);
                    return throwError(() => err);
                }),
                share()
            );
    }

    isLoggedIn(): Observable<boolean> {
        return this.loggedUser.pipe(
            // 只取第一个有效状态就结束流，避免Guard无限等待
            first(),
            map(user => !!user),
            catchError(() => of(false))
        );
    }
}

第二步：确认AuthGuard逻辑 #

你当前的Guard逻辑返回!isLoggedIn，是用于登录页等「仅未登录用户可访问」的路由，逻辑无需修改。因为调整后isLoggedIn会等服务端返回后才发射结果，Guard会自然等待判定完成后再执行路由放行/拦截操作。 #

方案2：使用APP_INITIALIZER提前完成身份拉取（更稳妥） #

如果希望彻底避免路由激活时身份状态未就绪的问题，可以用Angular内置的APP_INITIALIZER令牌，让应用在启动阶段先完成用户身份拉取，等服务端返回后再启动路由和页面渲染。

1. 给AuthService新增初始化方法

// auth.service.ts新增
initAuthState(): Observable<User | null> {
  return this.getCurrentUser().pipe(
    catchError(() => of(null))
  );
}

2. 在AppModule中配置初始化器

// app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AuthService } from './auth.service';

export function authInitializer(authService: AuthService) {
  return () => authService.initAuthState().toPromise();
}

@NgModule({
  // 其他模块配置省略
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: authInitializer,
      deps: [AuthService],
      multi: true
    }
  ]
})
export class AppModule {}

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