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

我遵循auth0的文檔來實現配置文件圖片和其他配置文件數據。在加載頁面之前，來自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); 
    }); 
}

登錄後，我得到了錯誤的訪問令牌必須存在獲取配置文件'，但如果我重新加載它，我沒有看到它。

來源

2017-07-24 kaws

你設置localStorage中的accessToken？如何？ –

是的，這是https://auth0.com/docs/quickstart/spa/angular2中的教程iam accessToken已設置，因爲配置文件被抓取，如果重新加載頁面。 – kaws

您是否更改setSession方法中的令牌到期時間？我相信他們的榜樣會在一秒之後過期。 –

我有同樣的問題，因爲@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); 
    }

來源

2017-09-05 08:56:29

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

回答

相關問題