如何在Angular守卫的Observable中注入Router实现跳转

你可以通过RxJS的pipe操作符结合tap操作来处理异步校验后的路由重定向，无需手动订阅（手动订阅会破坏守卫的异步返回逻辑）。修改后的守卫代码如下：

export class AuthGuard implements CanActivate {
  constructor(private router: Router, private autService: AuthService) {}

  canActivate(): Observable<boolean> {
    return this.autService.isAccessToLobby().pipe(
      tap((allowAccess) => {
        // 当权限校验不通过时，重定向到登录页
        if (!allowAccess) {
          this.router.navigate(['/login']);
        }
      })
    );
  }
}

关键说明： #

• 保持返回Observable<boolean>类型：Angular的CanActivate守卫支持返回Observable，框架会自动处理异步流的完成状态，确保路由等待校验结果后再决定是否跳转。
• 使用tap操作符执行副作用：tap不会修改Observable的返回值，仅在流中插入副作用逻辑（此处为路由重定向），完美适配当前场景。
• 避免手动订阅：直接订阅isAccessToLobby()会返回Subscription类型，不符合守卫的返回要求，导致Angular无法正确识别校验结果。

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