Angular/OIDC-登錄后未定義用??戶

我正在 ASP.NET 中使用 angular 和 IdentityServer SSO 提供程式創建一個應用程式。

我能夠登錄用戶并從身份驗證服務器獲取用戶資訊： 用戶資訊

這是在登錄后 SSO 將用戶重定向回時呼叫的方法（console.log 是在上一張影像上顯示用戶資訊的內容）：

//Auth service
async completeAuthentication()
  {
    this.user = await this.manager.signinRedirectCallback();
    console.log(this.user);
    this.authNavStatusSource.next(this.isAuthenticated());
  }

所以在這個地方我定義了用戶，一切都應該沒問題，但是當我嘗試在標題中使用用戶名時，它顯示我們未定義： 未定義用戶

這是呼叫 console.log 的地方：

//Header component
ngOnInit(): void {
    this.subscription = this.authService.authNavStatus$.subscribe(status => this.isAuthenticated = status);
    this.name = this.authService.username; //this is pr
  }

//Auth service
get username(): string
  {
    console.log(this.user);
    return this.user != null ? this.user.profile.preferred_username : '';
  }

以下是身份驗證服務和標頭組件的完整檔案：

auth.service.ts

import { Injectable } from '@angular/core';
import { UserManager, User } from 'oidc-client';
import { BehaviorSubject } from 'rxjs';
import { BaseService } from '../services/base.service';
import { ConfigService } from '../services/config.service';

@Injectable({
  providedIn: 'root'
})
export class AuthService extends BaseService {

  private authNavStatusSource = new BehaviorSubject<boolean>(false);
  authNavStatus$ = this.authNavStatusSource.asObservable();

  private manager = new UserManager
  ({
    authority: this.configService.AuthAppUri,
    client_id: 'angular_spa',
    redirect_uri: 'http://localhost:4200/auth-callback',
    post_logout_redirect_uri: 'http://localhost:4200',
    response_type: "code",
    scope: "openid profile email api.read",
    filterProtocolClaims: true,
    loadUserInfo: true
  });

  private user: User | null;

  constructor(private configService: ConfigService)
  { 
    super();

    this.manager.getUser().then(user => {
      this.user = user;
      this.authNavStatusSource.next(this.isAuthenticated());
    });
  }

  login(userName?: string)
  {
    let extraQueryParams = userName ?
    {
      userName: userName
    } : {};

    return this.manager.signinRedirect
    ({
      extraQueryParams
    });
  }

  async completeAuthentication()
  {
    this.user = await this.manager.signinRedirectCallback();
    this.authNavStatusSource.next(this.isAuthenticated());
  }

  isAuthenticated(): boolean
  {
    return this.user != null && !this.user.expired;
  }

  get authorizationHeaderValue(): string
  {
    return this.user ? `${this.user.token_type} ${this.user.access_token}` : null;
  }

  get username(): string
  {
    console.log(this.user);
    return this.user != null ? this.user.profile.preferred_username : '';
  }

  async logout()
  {
    await this.manager.signoutRedirect();
  }
}

header.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { AuthService } from '../core/authentication/auth.service';

@Component({
  selector: 'app-header',
  template: `
    <div >
      <div >
        <div  routerLink="/">
          LOGO
        </div>
        <div >
          MENU
        </div>
      </div>

      <div >
        <div >
          <a  routerLink="/gameslist">Games</a>
          <a  routerLink="/login" *ngIf="!isAuthenticated"><b>Login</b></a>
          <a  routerLink="" *ngIf="isAuthenticated"><b>{{name}}</b></a>
        </div>
      </div>
    </div>
  `,
  styles: [ 
    '.navbar{ border-style: solid; border-width: 0px 0px 2px 0px; }'
  ]
})
export class HeaderComponent implements OnInit, OnDestroy {

  name: string;
  isAuthenticated: boolean;
  subscription: Subscription;

  constructor(public authService: AuthService) { }

  ngOnInit(): void {
    this.subscription = this.authService.authNavStatus$.subscribe(status => this.isAuthenticated = status);
    this.name = this.authService.username;
  }

  async logout()
  {
    await this.authService.logout();
  }

  ngOnDestroy()
  {
    this.subscription.unsubscribe();
  }

}

為什么我不能在我的標題中使用用戶？有趣的是，我在 home 組件中使用了相同的 get username() 方法，它作業得很好，所以我真的不知道為什么我不能讓它在 header 組件中作業。

uj5u.com熱心網友回復：

我猜您實際上可以在標題中使用用戶名。問題在于，您可能在“實體化”之前就使用了它。

嘗試在訂閱中插入 this.name asignation，看看它是如何進行的：

this.subscription = this.authService.authNavStatus$
.subscribe(
   status => {this.isAuthenticated = status;
   this.name = this.authService.username;
});
    

標籤：有角的 打字稿 openid 连接

上一篇：angular*ngfor顯示表格

下一篇：如何在角度點擊事件后洗掉“遠發眼”