Angular загрузка маршрута с асинхронным c редиректом

Question

Мне нужно дождаться вызова API, прежде чем разрешить загрузку страницы в моем маршруте. В основном у нас включено A / B-тестирование (что является вызовом API), и на основе этого необходимо либо загрузить компонент, связанный с этим маршрутом, либо перенаправить на другой URL-адрес. Для этого я пытался использовать преобразователь, возвращающий 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 при инициализации Component и, таким образом, начинаю перенаправление только после этого.

Есть ли способ сделать переадресацию logi c без инициализации Component?

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()
    );
  }
}