Angular 2 + Auth0“登录后无法读取null的属性'图片'

Question

我已将Auth0身份验证集成到Angular 2应用程序中，并且在登录后，我得到“无法读取属性'图片'的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');
  };
}

有人可以就这个问题给我一些建议吗？

Answer 1

当ngIf处理时，

profile不存在，抛出该异常。 将您的ngIf更改为*ngIf="auth.authenticated() && profile"以延迟处理，直到profile存在。

我猜你在等待承诺解决，或者你在授权后没有在任何地方设置profile，这就是profile为空的原因

Answer 2

最后，我们设法在朋友的帮助下解决了这个问题。 因此，问题是profile在创建localStorage时从HeaderComponent获取数据，但localStorage仅在用户成功登录时具有该值。

对于这种情况，您必须订阅auth才能进行个人资料更新 从中获取更新的个人资料。

更新的代码可以在github存储库中找到：
https://github.com/cstodor/Auth0Lock-Angular2