在* ngIf中使用oidc-client在Angular中实现isLoggedIn（）函数

Question

目标：我正在尝试使用IdentityServer4和oidc客户端在Angular应用中隐藏和显示Loggin和Logout按钮。

问题：来自我的isLoggedIn函数的响应在返回true和* ngIf从不显示Logout按钮或隐藏Login按钮之前返回undefined。查看代码：

app.componenet.html：

<span>
      <button *ngIf="!isLoggedIn()" mat-button (click)="login()">Login</button>
      <button *ngIf="isLoggedIn()" mat-button (click)="logout()">Logout</button>
</span>

app.componenet.ts：

    isLoggedIn(){
        console.log('isLoggedIn -this._authService.isLoggedIn():',
          this._authService.isLoggedIn());
        this._authService.isLoggedIn();
      }

auth.service.ts

isLoggedIn(): boolean{
    return this._user && this._user.access_token && !this._user.expired;
  }

在auth.service.ts中，我将用户对象设置如下：

 this._userManager = new UserManager(config);
    this._userManager.getUser().then(user =>{
      if(user && !user.expired){
        this._user = user;
      }

console.log输出：

我尝试过的事情：

1. 我尝试使用oidc-client版本切换 在leatest和1.4.1之间，并确保它们匹配 package.json和我的oidc-login-redirect.html文件。
2. 将auth.service.ts isLoggedIn函数转换为Promise isLoggedIn（）并直接从* nf（如果使用异步管道）调用

auth.service.ts     诺言{         返回新的Promise（resolve => {           解析（this._user && this._user.access_token &&！this._user.expired）;         }）;       }

app.component.html

  <button *ngIf="!this._authService.isLoggedIn() | async" mat-button (click)="login()">Login</button>
  <button *ngIf="this._authService.isLoggedIn() | async" mat-button (click)="logout()">Logout</button>

这两种方法均未起作用，并且Promise尝试导致google chrome挂断：

Answer 1

如果您是在某个Angular应用中的某个地方（而不是位于SPA之外的单独的html页面）调用signinRedirectCallback，则很可能在调用登录回调之前调用了设置this.user的代码。 / p>

您应该在UserManager上订阅addUserLoaded，并在其处理程序中的身份验证服务中设置用户。这样，您的用户将始终保持最新状态。

如果上面的代码是从您的源中复制/粘贴的，则您的app.component isLoggedIn不会从auth服务返回值，它只是在auth服务上调用isLoggedIn而不返回值。