存在Gravatar之前，Angular2 Auth与Auth0重定向

背景

在我的

angular2

应用程序中，我使用

Auth0

进行

身份验证

。在

重定向

回到我的网站后，我在

组件中向他们显示一些用户的
数据
。当页面
呈现时
不会显示用户的
电子邮件
或
gravatar
/image。但此时如果我刷新页面，
gravatar
和
email
将显示

设置

在app.component.html中，我将面包屑组件直接添加到导航下，但直接添加到
路由器出口的顶部

面包屑显示在每一页上。如果有人未登录，则会显示一个
登录/注册链接。如果有人登录，则应显示用户的图片及其电子邮件，该图片将在
auth0
配置文件中返回，并保存到
localStorage

在呈现到
路由器出口的组件内部，
localStorage
中的所有数据都显示在页面中。这一页呈现得非常完美。但是
breadcrumb
组件
没有使用
localStorage
中的正确数据进行更新

显然，这里的问题是，
breadcrumb
组件
正在呈现，而
localStorage
中的
配置文件
仍然为
null

代码示例

我这样显示数据

breadcrumb.component.html

当我检查本地存储时，数据确实存在。因此，这让我相信页面是在数据能够放入本地存储之前呈现的

这是我的
auth0服务的大部分

授权服务

问题

当有人登录时，在完成页面呈现之前，如何确保数据存在？这样我可以确保向用户显示正确的数据
 我无法发表评论，我将写下这篇文章作为回答。
我也有同样的问题，我通过以下方式解决了它：

编辑

试试这个：

首先，我使用这个自定义事件发射器，使生活变得简单：

import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class EmitterService {
   private static _emitters: { [ID: string]: EventEmitter<any> } = {};

   static get(ID: string): EventEmitter<any> {
      if (!this._emitters[ID]) 
        this._emitters[ID] = new EventEmitter();
      return this._emitters[ID];
    }

 }

在我的html中，我有：

欢迎，{{username}

希望这有帮助
 谢谢，伙计，我会查一查的，伙计，我更新了我的问题，让你看看我做了什么。这些都没用。我不明白为什么。面包屑组件是应用程序模板的一部分。在app.component中调用。html。我没有这个问题，直到我添加了延迟加载。你认为我需要把它添加到每一个延迟加载的组件中，而不是面包屑组件中，面包屑组件是html显示这些信息的地方吗？是的，这样我就可以从本地存储中输出概览组件中的日期。但是breadcrumbs组件显然没有使用更新的数据重新呈现。我会仔细阅读你的编辑。是的，但基本上你的身份验证服务就是这么做的。如果用户已经通过身份验证，它将从本地存储器获取数据。除非令牌已过期。但我的服务在对其进行身份验证时在本地存储中设置数据。并使用数据更新组件。但是面包屑直到页面刷新后才会更新。有没有办法在用户登录后强制面包屑组件重新加载？
import { Component, OnInit, AfterViewInit, OnChanges } from '@angular/core';
import { Router, ActivatedRoute }    from '@angular/router';
import { Auth }                      from './../services/auth.service';

@Component({
    selector: 'breadcrumbs',
    templateUrl: './breadcrumb.component.html'
})
export class BreadcrumbsComponent implements OnInit, AfterViewInit, OnChanges {
  private gravatar: string
  private email: string;

  constructor(private router:Router, private route:ActivatedRoute, private auth: Auth) {
      if (this.auth.authenticated()) {
        var userProfile = JSON.parse(localStorage.getItem('profile'));
        this.gravatar = userProfile.picture;
        this.email = userProfile.email;
      }
    }

  ngOnChanges() {
    if (this.auth.authenticated()) {
      var userProfile = JSON.parse(localStorage.getItem('profile'));
      this.gravatar = userProfile.picture;
      this.email = userProfile.email;
    }
  }

  ngOnInit() {
    if (this.auth.authenticated()) {
      var userProfile = JSON.parse(localStorage.getItem('profile'));
      this.gravatar = userProfile.picture;
      this.email = userProfile.email;
    }
  }

  ngAfterViewInit() {
    if (this.auth.authenticated()) {
      var userProfile = JSON.parse(localStorage.getItem('profile'));
      this.gravatar = userProfile.picture;
      this.email = userProfile.email;
    }
  }
}

@Injectable()
export class Auth {
  lock = new Auth0Lock(myConfig.clientID, myConfig.domain, options, {});
  userProfile: Object;
  logreg: LogReg;
  user: User;

  constructor(private router: Router, private http: Http ) {

    this.userProfile = JSON.parse(localStorage.getItem('profile'));
    this.user = JSON.parse(localStorage.getItem('user'));
    this.lock.on('authenticated', (authResult: any) => {
      localStorage.setItem('access_token', authResult.idToken);
      this.lock.getProfile(authResult.idToken, (error: any, profile: any) => {
        if (error) {
          console.log(error);
          return;
        }

          // Login Or Register User On Our Server
        this.logreg = new LogReg(profile.email_verified, profile.email);

        this.checkRegister(this.logreg).subscribe(
            (res)=>{
              console.log("Hey this runs");
              console.log(res);
                if (res.email_verified === false) {
                 localStorage.removeItem('profile');
                 localStorage.removeItem('api_key');
                 localStorage.removeItem('access_token');
                 localStorage.removeItem('user');
                 this.userProfile = null;
                 this.user = null;
                 this.router.navigate(['/verify-email']);

                }
            else if (res.api_key_exist === false) {
                  console.log("Hey this works")
                localStorage.setItem('profile', JSON.stringify(profile));
                this.userProfile = profile;
                console.log(this.userProfile);
                this.user = new User(profile.email, '', '', '', '', '', '', '', '', '', '', res.api_key_exist, '')
                localStorage.setItem('user', JSON.stringify(this.user));
                this.router.navigate(['/profile']);

            } else if (res.api_key_exist === true) {
                this.user = new User(res.user.email,
                    res.user.first_name,
                    res.user.middle_name,
                    res.user.last_name,
                    res.user.dob,
                    res.user.phone,
                    res.user.street_address,
                    res.user.city_address,
                    res.user.state_address,
                    res.user.zip_address,
                    res.user.client_ss,
                    res.api_key_exist,
                    res.api_key);
                console.log(this.user);
                localStorage.setItem('api_key', JSON.stringify(res.api_key));
                localStorage.setItem('user', JSON.stringify(this.user));
                localStorage.setItem('profile', JSON.stringify(profile));
                this.router.navigate(['/overview']);
            }
        },
            (err)=>{ console.log(err);}

        );
      });
      this.lock.hide();
    });
  }

  public checkRegister(model: LogReg) {
      // Parameters obj-
      let params: URLSearchParams = new URLSearchParams();
      params.set('email', model.email);
      params.set('email_verified', model.email_verified);

      return this.http.get(STATICS.API_BASE + STATICS.API_LOGIN,
          { search: params }).map((res:Response) =>  res.json());
      }

  public login() {
    this.lock.show();
  }
}

import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class EmitterService {
   private static _emitters: { [ID: string]: EventEmitter<any> } = {};

   static get(ID: string): EventEmitter<any> {
      if (!this._emitters[ID]) 
        this._emitters[ID] = new EventEmitter();
      return this._emitters[ID];
    }

 }

constructor(private auth: Auth, private issuesService: IssuesService) {
if (this.auth.authenticated()){
    this.userProfile = this.auth.getProfile()
    this.username = this.userProfile.name
}
else {
  this.loadUserDetails().subscribe(_ => {
    this.username= this.userProfile.name 
  })
  }
 }

 ngOnInit() {
  if (this.auth.authenticated()){
    this.userProfile = this.auth.getProfile()
    this.username = this.userProfile.name
    console.log(this.username)
 }
 else {
  this.loadUserDetails().subscribe(_ => {
    this.username= this.userProfile.name 
  })
}
}

loadUserDetails(){
 return EmitterService.get('USER_LOGGED_IN').map(userProfile => { 
    this.userProfile= userProfile
  });
}