Angular 使用异步重定向加载路由

Question

我需要等待一些 API 调用，然后才能让我的路由中的页面加载。基本上我们启用了 A/B 测试（这是 API 调用），并且基于此将不得不加载与该路由关联的组件或重定向到不同的 url。 为此，我尝试使用 returns Observable<boolean> 的解析器。这是代码：

export class RedirectResolveService implements Resolve<Observable<boolean>> {
  private empty = new Observable<boolean>();
  constructor(private apiService: ApiService, private router: Router) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.apiService.get("/api/abtest/mypage").pipe(
      tap((isOn) => {
        if (!isOn) {
          window.location.href = "/welcome-page";
        }
      }),
      first()
    );
  }
}

然后我在路由中添加这个：

{
  path: 'new-page',
  component: NewPageComponent,
  resolve: {
    redirect: RedirectResolveService,
  },
},

然后在 NewPageComponent 的构造函数中添加订阅：

export class NewPageComponent {
  constructor(private route: ActivatedRoute) {
    this.route.data.subscribe();
  }
}

它有效，但对于发生重定向的情况，我看到首先呈现 NewPageComponent，然后发生重定向。这是有道理的，因为我在组件初始化时订阅了我的 Observable，因此之后才开始重定向。

有没有办法在不初始化组件的情况下制作重定向逻辑？

Answer 1

使用路由守卫会是这样的

@Injectable({
  providedIn: "root",
})
export class RedirectGuard implements CanActivate {
  constructor(
    private _authService: AuthService,
    private _router: Router,
    private apiService: ApiService
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    return this.apiService.get("/api/abtest/mypage").pipe(
      tap(isOn => isOn || this._router.parseUrl("/welcome-page")),
      first()
    );
  }
}