Angular canActivate 从服务获取更新的变量

Angular canActivate get updated variable from service

我有一个来自服务的 post 请求,如果用户已登录,该请求 returns 并且我想将 authGuard 设置为仅在用户登录时显示管理面板。 我的post请求如下:

public isLoggedIn: boolean = false;
checkSesh(data: object) {
    const options = {
      headers: new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8'),
      withCredentials: true
    }

    return this.http.post<any>(`${this.AUTH_SERVER}`, data, options).subscribe(
      (res) => {
        this.reload = res[0].reload;
        if (this.reload === 0) {
          this.isLoggedIn = true;
        }
      }
    );
  }

我的 authguard 具有以下内容:

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {    
    return this.service.isLoggedIn;
  }

但它 returns false(它在订阅之前获取布尔值)。

在 post 请求 运行 并且值已更新后,我如何更新它?

谢谢

您需要 return Observable 作为 canActivate 函数的结果。 因此,您可以将 checkSesh 函数中的结果映射到 return true/false。 所以像这样:

checkSesh(data: object) {
    const options = {
        headers: new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8'),
        withCredentials: true
    }

    return this.http.post<any>(`${this.AUTH_SERVER}`, data, options)
        .pipe(
            map((res) => {
                this.reload = res[0].reload;
                if (this.reload === 0) {
                    this.isLoggedIn = true;
                    return true;
                }
                return false;
            })
        );
}

然后在 canActivate 函数中,您可以执行以下操作:

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.service.checkSesh();
}