auth0 獲取后台配置文件信息

Question

我正在嘗試從 Auth0 獲取用戶個人資料信息。 它與 pipe 異步在前端工作

<pre *ngIf="auth.userProfile$ | async as profile">
<code>{{ profile | json }}</code>
</pre>

但是在后端如果我想讀取昵稱並用它做點什么。 我迷路了。

constructor(public auth: AuthService)
ngOnInit() {
   if (this.auth.isAuthenticated$) {
    const result = this.auth.userProfile$;
   }
}

我知道我的變量“結果”是一個 Observable。 但我對 Observable 的這些東西很陌生。 我試圖獲得價值。 如果我使用調試控制台，我可以看到這一行的值：

this.auth.userProfile$.source.value.nickname

但是如果我在我的代碼中寫它，我有這個錯誤： Typescript 錯誤：屬性'值'不存在於類型'Observable'

ngOnInit() {
   if (this.auth.isAuthenticated$) {
    const result = this.auth.userProfile$;
    console.log(this.auth.userProfile$.source.value.nickname); // error here

   }
}

所以有人可以幫我解決這個問題嗎？ 謝謝

Answer 1

您可以通過訂閱來訪問observable中的數據（這就是async pipe 在后台所做的事情）。

以下是如何訂閱您的 observable 的示例：

// import { tap } from 'rxjs/operators';
// tap is one of many rxjs operators
// operators allow you to perform operations on data within observables

this.auth.userProfile$.pipe(
  tap(profile => {
    console.log(profile);
  })
)
.subscribe(); // this is what allows you access the data within the observable

可觀察的： https://angular.io/guide/observables

RXJS 運營商： https://rxjs-dev.firebaseapp.com/guide/operators

Answer 2

我終於找到了解決方案：

在 class 我輸入以下代碼：

export class getInfo implements OnInit {
   private login_info: any;

   ngOnInit() {
      this.auth.getUser$().subscribe(val => {
        this.login_info = val;
        console.log('print info', val.nickname);
     });
  }
}

public useInfo(status: string) {
  console.log('print info', this.login_info.nickname);
}

所以在 useInfo 方法中，我可以使用從用戶配置文件中獲取的信息。