Angular 2 + Auth0「登錄後無法讀取null的屬性'圖片'

我已經將Auth0驗證集成到Angular 2應用程序中，並且在登錄後，我得到這個」Can not read property'picture of null「error，但是，如果我刷新頁面，則表明用戶已登錄，並且控制檯中顯示的圖像沒有錯誤。Angular 2 + Auth0「登錄後無法讀取null的屬性'圖片'

這是我的錯誤：

鏈接到GitHub的庫： https://github.com/cstodor/Auth0Lock-Angular2

這是受影響的元素在header.component.html代碼：

<span *ngIf="auth.authenticated()"> 
    <img class="img-circle" width="25" height="25" src="{{ profile.picture }}"> {{ profile.nickname }} 
</span>

header.component.ts：

profile: any; 

    constructor(private auth: Auth) { 
    this.profile = JSON.parse(localStorage.getItem('profile')); 
    }

auth.service.ts

import { Injectable } from '@angular/core'; 
import { tokenNotExpired } from 'angular2-jwt'; 
import { myConfig } from './auth.config'; 

let Auth0Lock = require('auth0-lock').default; 

@Injectable() 
export class Auth { 
    // Configure Auth0 
    lock = new Auth0Lock(myConfig.clientID, myConfig.domain, {}); 
    profile: any; 

    constructor(private router: Router) { 
    this.lock.on("authenticated", (authResult: any) => { 
     this.lock.getProfile(authResult.idToken, function (error: any, profile: any) { 
     if (error) { 
      throw new Error(error); 
     } 
     localStorage.setItem('id_token', authResult.idToken); 
     localStorage.setItem('profile', JSON.stringify(profile)); // We will wrap the profile into a JSON object as In local Storage you can only store strings 
     console.log('PROFILE: ' + profile); 
     }); 
    }); 
    } 

    public login() { 
    // Call the show method to display the widget. 
    this.lock.show(); 
    }; 
    public authenticated() { 
    // Check if there's an unexpired JWT 
    // This searches for an item in localStorage with key == 'id_token' 
    return tokenNotExpired(); 
    }; 

    public logout() { 
    // Remove tokens from localStorage 
    localStorage.removeItem('id_token'); 
    localStorage.removeItem('profile'); 
    }; 
}

誰能給我這個問題的一些建議嗎？

來源

2016-11-29 Todor

射擊，因爲我沒有做過太多ANG2但''將是我的猜測。我認爲使用'src'仍然存在ang2中的問題，就像它在ang1中一樣 – Ronnie

你確定profile.picture不是null嗎？此外，在src屬性中使用{{profile.picture}}等角度標記不能按預期工作。你會想用ng-src代替。 – jbrown

@Ronnie錯過了...它沒有解決問題，但好點。 – Todor

profile當ngIf進程拋出異常時不存在。將您的ngIf更改爲*ngIf="auth.authenticated() && profile"以延遲處理直至profile存在。

我猜你在等待承諾解決，或者你沒有設置profile你auth後的任何地方，這就是爲什麼profile爲空。

來源

2016-11-29 22:38:30

我推遲了化身圖像的處理，錯誤不再顯示在控制檯中，但圖像也沒有出現。也許重定向用戶後身份驗證將解決問題，但我認爲這將是一個糟糕的解決方法。 – Todor

@mrTodor，配置文件如何設置？你能否在問題中包含初始化profile變量的代碼部分？ –

@mrTodor，它絕對看起來像「配置文件」從未設置。你在哪裏分配？您可以向我們展示驗證後運行的代碼嗎？ –

最後，我們設法通過朋友的幫助解決了這個問題。那麼，問題是，profile會從localStorage數據創建HeaderComponent時，但localStorage只有當用戶成功登錄的價值。

對於這種情況，你必須訂閱auth的個人資料更新和意志從它獲取更新的配置文件。

更新的代碼可以在GitHub的倉庫中找到：在黑暗中
https://github.com/cstodor/Auth0Lock-Angular2

來源

2016-12-02 11:51:15 Todor

Angular 2 + Auth0「登錄後無法讀取null的屬性'圖片'

回答

相關問題