L'objet profil de auth0 est vide jusqu'à ce que la page soit chargée

Question

J'ai suivi la documentation de auth0 pour implémenter l'image de profil et d'autres données de profil. L'objet profile de auth0 est vide jusqu'à ce que la page soit chargée. Voici mon code pour appeler les données de profil du composant navbar,

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

Voici la méthode getProfile de auth.service,

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); 
    }); 
} 

Après la connexion, j'obtiens l'erreur « jeton d'accès doit exister pour chercher profil 'mais si je le recharge je ne le vois pas.

Answer 1

J'ai eu la même question que @Kaws

Il travaille dans le tutoriel, mais quand je tente de mettre en œuvre dans ma solution, je veux montrer le « surnom » dans une barre de navigation qui est chargé avant le jeton d'accès est stocké.

La solution est d'utiliser une observable comme Suggérée par 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); 
    } 
    }); 
} 

Puis dans votre appel getProfile dans le composant:

userImage: string; 

    constructor(private auth: AuthService) {} 

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