Angular路由：路由切换时获取用户数据的优化方案咨询

问题背景 #

我在使用Angular Guards从API获取用户信息时遇到了问题。我的目标是始终在local storage中保持最新的用户数据，确保每次路由切换时都能从API获取最新数据。

为实现这一目标，我通过守卫调用API获取用户信息，但问题在于，在守卫内调用API会导致页面（路由）打开延迟，因为守卫需要等待API响应后才能继续执行。由于我创建了sequentialGuards函数来顺序处理多个守卫而非异步处理，且单一路径配置了多个守卫，我需要先获取用户API的最新数据，再执行其他守卫逻辑。

我不喜欢这种方式，因为它给页面导航带来了不必要的等待时间。因此我想寻求更好的解决方案：让路由无需等待API响应即可切换，在后台异步获取用户数据，之后再执行守卫逻辑，若不符合权限则跳转页面（比如未完成引导的用户无法访问/home页面等）。

现有代码 #

sequentialGuards函数 #

export function sequentialGuards(guards: CanActivateFn[]): CanActivateFn {
    return (route, state) => {
        const injectionContext = inject(Injector);
        // Convert an array into an observable.
        return from(guards).pipe(
            // For each guard, fire canActivate and wait for it to complete.
            concatMap((guard) => {
                return runInInjectionContext(injectionContext, () => {
                    var guardResult = guard(route, state);
                    if (guardResult instanceof Observable) {
                        return guardResult;
                    } else if (guardResult instanceof Promise) {
                        return from(guardResult);
                    } else {
                        return of(guardResult);
                    }
                });
            }),
            // Don't execute the next guard if the current guard's result is not true.
            takeWhile((value) => value === true, true),
            // Return the last guard's result.
            last()
        );
    };
}

路由配置 #

{
    path: 'home',
    component: HomeComponent,
    canActivate: [sequentialGuards([authGuard, verifyGuard, onboardGuard])],
},
{
    path: 'documents',
    component: DocumentsComponent,
    canActivate: [sequentialGuards([authGuard, verifyGuard, onboardGuard])],
},

authGuard #

export const authGuard: CanActivateFn = (route, state) => {
    const url: string = decodeURIComponent(state.url);
    return inject(CheckLoginService).checkLogin(url);
};

CheckLoginService #

export class CheckLoginService {
    constructor(private authService: AuthService,
                private tokenService: TokenService,
                private userService: UserService,
                private router: Router) {
    }

    checkLogin(url: string): Observable<boolean> {
        return this.authService.user().pipe(
            switchMap(() => {
                if (this.tokenService.getToken() && this.userService.getUser()) {
                    return of(true);
                }

                this.authService.redirectUrl = url;
                this.router.navigate(['/login'], {queryParams: {returnUrl: url}});
                return of(false);
            }),
            catchError(() => {
                this.authService.redirectUrl = url;
                this.router.navigate(['/login'], {queryParams: {returnUrl: url}});
                return of(false);
            })
        );
    }
}

解决方案 #

核心思路是先允许路由激活，后台异步拉取用户数据并校验权限，校验不通过再跳转，同时保证用户数据的时效性和守卫逻辑的正确性。

1. 重构用户数据获取逻辑，后台异步更新 #

把用户数据的拉取从守卫中剥离，放到全局的UserSyncService中，在应用初始化或路由切换时后台自动更新：

@Injectable({ providedIn: 'root' })
export class UserSyncService {
  private userRefresh$ = new Subject<void>();

  constructor(
    private authService: AuthService, 
    private userService: UserService,
    private router: Router
  ) {
    // 应用启动时先拉取一次用户数据
    this.refreshUser();
    // 监听路由切换事件，每次跳转后后台刷新用户数据
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => this.refreshUser());
  }

  refreshUser(): void {
    this.authService.user().pipe(
      catchError(() => of(null))
    ).subscribe(user => {
      if (user) {
        this.userService.setUser(user); // 更新localStorage中的用户数据
        this.userRefresh$.next();
      }
    });
  }

  // 提供给守卫订阅用户数据刷新完成的事件
  onUserRefresh(): Observable<void> {
    return this.userRefresh$.asObservable();
  }
}

2. 修改守卫逻辑，支持"先放行后校验" #

调整守卫不再阻塞路由，先返回true允许页面加载，同时在后台等待用户数据刷新完成后执行权限校验，不满足条件时自动跳转：

重构authGuard

export const authGuard: CanActivateFn = (route, state) => {
  const userSyncService = inject(UserSyncService);
  const checkLoginService = inject(CheckLoginService);
  const url = decodeURIComponent(state.url);

  // 立即放行路由
  setTimeout(() => {
    // 等待用户数据刷新完成后执行登录校验
    userSyncService.onUserRefresh().pipe(
      take(1)
    ).subscribe(() => {
      checkLoginService.checkLogin(url).subscribe(isValid => {
        if (!isValid) {
          // 校验不通过，跳转登录页
          inject(Router).navigate(['/login'], { queryParams: { returnUrl: url } });
        }
      });
    });
  });

  return true;
};

调整onboardGuard（示例）

对于依赖用户数据的权限守卫，同样改成异步校验模式：

export const onboardGuard: CanActivateFn = (route, state) => {
  const userSyncService = inject(UserSyncService);
  const userService = inject(UserService);
  const router = inject(Router);

  setTimeout(() => {
    userSyncService.onUserRefresh().pipe(
      take(1)
    ).subscribe(() => {
      const user = userService.getUser();
      if (user && !user.isOnboarded) {
        router.navigate(['/onboard']);
      }
    });
  });

  return true;
};

3. 优化sequentialGuards（可选） #

现在守卫都是立即返回true，顺序执行的意义不大，可简化或直接移除该函数：

// 简化后的sequentialGuards，仅处理守卫逻辑不阻塞路由
export function sequentialGuards(guards: CanActivateFn[]): CanActivateFn {
  return (route, state) => {
    const injectionContext = inject(Injector);
    from(guards).pipe(
      concatMap(guard => runInInjectionContext(injectionContext, () => guard(route, state)))
    ).subscribe();
    return true;
  };
}

4. 页面加载状态优化（可选） #

为避免用户看到无权限内容的闪烁，可在页面组件中添加加载态，直到用户数据校验完成：

@Component({
  template: `
    <div *ngIf="isLoading" class="loading">加载中...</div>
    <div *ngIf="!isLoading" class="page-content">
      <!-- 页面核心内容 -->
    </div>
  `
})
export class HomeComponent implements OnInit {
  isLoading = true;

  constructor(private userSyncService: UserSyncService) {}

  ngOnInit(): void {
    this.userSyncService.onUserRefresh().pipe(take(1)).subscribe(() => {
      this.isLoading = false;
    });
  }
}

关键注意事项 #

• 确保用户数据更新逻辑是幂等的，避免重复发起API请求
• 处理API请求失败的场景，比如token过期时及时清理本地数据并跳转登录页
• 对于高敏感页面，建议保留短暂加载态，防止用户看到未授权内容

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