使用异步重定向的角度路由加载答案

【问题标题】：Angular route loading with async redirect使用异步重定向的角度路由加载
【发布时间】：2020-08-05 20:19:32
【问题描述】：

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

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

【问题讨论】：

如果你使用路由保护而不是解析器呢？

标签： angular angular-routing angular-resolver

【解决方案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()
    );
  }
}

【讨论】：

谢谢！我正在考虑，但不确定 canActivate 方法是否可以返回 Observable