auth0中的配置文件對象為空，直到頁面加載完畢

Question

我已遵循auth0的文檔來實現個人資料圖片和其他個人資料數據。 來自auth0的配置文件對象為空，直到頁面被加載。 這是我的代碼，用於從導航欄組件調用配置文件數據，

ngOnInit() {
    if (this.auth.userProfile) {
        this.profile = this.auth.userProfile;
        return;
    }
    if (this.auth.authenticated) {
        this.auth.getProfile((err, profile) => {
            this.profile = profile;
        });
    }
}

這是來自auth.service的getProfile方法，

public getProfile(cb): void {
    const accessToken = localStorage.getItem('access_token');
    if (!accessToken) {
        throw new Error('Access token must exist to fetch profile');
    }    
    const self = this;
    this.auth0.client.userInfo(accessToken, (err, profile) => {
        if (profile) {
            self.userProfile = profile;
        }
        cb(err, profile);
    });
}

登錄后，出現錯誤“訪問令牌必須存在才能獲取配置文件”，但是如果我重新加載它，則看不到它。

Answer 1

我和@Kaws有同樣的問題

它可以在本教程中使用，但是當我嘗試在解決方案中實現它時，我想在導航欄中顯示“昵稱”，該導航欄在存儲訪問令牌之前已加載。

解決方案是使用chenkie建議的可觀察值

AuthService.ts：

import { Observable, Observer } from 'rxjs';
// ...
private observer: Observer<string>;
userImageChange$: Observable<string> = new Observable(obs => this.observer = obs);
// ...
public handleAuthentication(): void {
  this.auth0.parseHash((err, authResult) => {
    if (authResult && authResult.accessToken && authResult.idToken) {
      window.location.hash = '';
      this.setSession(authResult);
      this.getProfile();
      this.router.navigate(['/controlpanel']);
    } else if (err) {
      this.router.navigate(['/controlpanel']);
      console.log(err);
    }
  });
}

public getProfile(): void {
  const accessToken = localStorage.getItem('access_token');
  if (!accessToken) {
    throw new Error('Access token must exist to fetch profile');
  }
  const self = this;
  this.auth0.client.userInfo(accessToken, (err, profile) => {
  if (profile) {
      this.observer.next(profile.picture);
    }
  });
}

然后在組件的getProfile調用中：

 userImage: string;

  constructor(private auth: AuthService) {}

  ngOnInit() {
    this.auth.userImageChange$.subscribe(image => this.userImage = image);
  }