Angular 11中Resolver未等待API返回结果就加载路由如何解决

Resolver未按预期阻塞路由等待接口返回，核心是三个问题：

• setPermissions()返回的Observable没有主动结束：Angular Resolver只有在接收到Observable的complete通知后才会放行路由。如果权限服务直接返回长期存活的状态流（比如全局存储权限的BehaviorSubject），或者接口报错时流抛出未捕获的error，都会导致路由不等待直接跳转或者永久卡住。
• 未登录分支返回值不符合Resolver约定：this._Router.navigate()返回的是代表导航是否成功的Promise<boolean>，不是Resolver要求传递给路由的数据，会干扰Resolver的状态判断。
• 没有处理接口异常分支：权限接口请求失败时没有捕获错误、中断导航，Angular遇到未捕获的resolve错误会直接放行跳转。

调整AuthResolver实现 #

引入需要的RxJS操作符，修正resolve逻辑：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, EMPTY } from 'rxjs';
import { first, catchError } from 'rxjs/operators';
import { PermissionService } from './permission.service';
import { AppUtils } from './app.utils';

@Injectable({ providedIn: 'root' })
export class AuthResolver implements Resolve<any> {
  constructor(
    private _Router: Router,
    private _PermissionService: PermissionService
  ) { }

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    // 未登录场景：跳转登出页，返回空流终止当前导航
    if (!AppUtils.isLoggedIn()) {
      this._Router.navigate(['app/auth/logout']);
      return EMPTY;
    } 
    
    return this._PermissionService.setPermissions().pipe(
      // 核心：取接口首次返回结果后立刻结束流，触发放行路由
      first(),
      // 捕获接口报错场景
      catchError(() => {
        this._Router.navigate(['app/auth/logout']);
        return EMPTY;
      })
    );
  }
}

（可选）调整路由配置 #

如果需要不仅是页面重载，每次进入主路由模块都重新执行权限校验，可以在主路由配置里加上runGuardsAndResolvers参数：

{
    path: '', 
    component: MainLayoutComponent,
    resolve: {
      auth: AuthResolver
    },
    runGuardsAndResolvers: 'always', // 每次进入该路由分支都重跑resolver
    children: [
      // ...原有子路由配置
    ]
}

• Angular 11的Resolver执行逻辑：返回的Observable必须触发complete、Promise必须触发resolve，路由才会继续加载；如果返回EMPTY（直接完成的空流）或者抛出未捕获错误，会中断当前导航。
• 不要直接返回Router.navigate()的调用结果：该方法的返回值是导航动作的状态Promise，不是Resolver需要传递给路由的数据，会导致流程判断异常。
• 必须给接口流加first()/take(1)：如果setPermissions()返回的是多值流（比如全局状态流），流本身不会主动结束，会导致路由一直等待；如果没有捕获流的错误，异常发生时路由会直接跳过Resolver完成跳转。

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