0

在让我的路由中的页面加载之前，我需要等待一些 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，因此之后才开始重定向。

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

4

1 回答 1

2

使用路由保护它会是这样的

@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()
    );
  }
}
于 2020-08-05T20:56:54.437 回答