在 angular 10 中方法运行之前，构造函数中的 Promise 没有完成

Question

angular10 中 oidc-client 的承诺构造函数解析时间过长，在构造函数将 de 值放入用户变量之前调用 isLoggedIn 函数。

这是我的代码：

import { UserManager, UserManagerSettings, User } from 'oidc-client';

export class AuthService {
  private user: User = null;
  private manager = new UserManager(getClientSettings());
  privatecachedRequests: Array<HttpRequest<any>> = [];

  constructor() {
    this.manager.getUser().then(user => {
      this.user = user;
    });
  }
  isLoggedIn(): boolean {
    return this.user != null && !this.user.expired; <= this.user is null because the constructor did not finished the async part
  }

此代码在 angular 8

中有效

当我在 isLoggedIn 方法中调用 getUser() 函数时，它起作用了，但我想从构造函数中使用它

Answer 1

使用Rxjs主题作为代理。

import {Subject } from 'rxjs',<-- add this
export class AuthService {
  private user: User = null;
  private manager = new UserManager(getClientSettings());
  privatecachedRequests: Array<HttpRequest<any>> = [];
  private loginSubject= new Subject()<-- add this line

  constructor() {
    this.manager.getUser().then(user => {
      this.user = user;
      if(this.user != null && !this.user.expired)
       {
         this.loginSubject.next(true)
       } else{
           this.loginSubject.next(false)
          }
     
    });
  }
  isLoggedIn(): Observable<boolean> {
     return this.loginSubject.asObservbale();<-- avoid leak 
  }

您可以 return 在 canActivate

中观察

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import {map} from 'rxjs/operators';


@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService:AuthService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {
    return this.authService.isLoggedIn().pipe(
      map(res => {
        if (res) {
          return true;
        } else {
          this.router.navigate(['/login']);
           return false
        }
      })
  }   

}

在 angular 10 中方法运行之前，构造函数中的 Promise 没有完成

Promisse in constructor don't finish before method runs in angular 10

angular

typescript

angular-promise

oidc-client-js

oidc-client