Question

背景

在我的angular2申请中，我使用Auth0到authenticate。在redirect返回我的网站后，我会在data中向他们显示一些用户component。页面renders时，它不会显示用户的email或gravatar /图片。但是，如果我刷新页面，gravatar和email会显示。

设置

在app.component.html中，我将直接在导航下添加面包屑组件，但直接在router-outlet之上添加。

每个页面都会显示面包屑。如果有人未登录，则会显示Login / Register个链接。如果有人登录，则应显示用户的照片以及在auth0 profile中保存到localStorage的电子邮件。

在router-outlet内呈现localStorage所有数据的组件内部显示在页面中。此页面呈现完美。但breadcrumb component未使用localStorage中的正确数据进行更新。

很明显，这里的问题是breadcrumb component正在呈现profile localStorage仍为null。

代码示例

我正在显示这样的数据，

breadcrumb.component.html

<ul class="nav navbar-nav pull-right" *ngIf="!auth.authenticated()">
  <li class="nav-item">
    <a class="nav-link" (click)="auth.login()">Login / SignUp</a>
  </li>
</ul>

<ul class="nav navbar-nav pull-right" *ngIf="auth.authenticated()">
  <li class="nav-item">
    <a class="aside-toggle" href="#" role="button" aria-haspopup="true" aria-expanded="false">

      <span *ngIf="auth.userProfile.nickname" class="profile-name">{{auth.userProfile.nickname}}</span>
      <span *ngIf="!auth.userProfile.nickname" class="profile-name">Account</span>

      <i class="icon-bell"></i><span class="tag tag-pill tag-danger profile-alerts">5</span>

      <img *ngIf="auth.userProfile.picture" [src]="auth.userProfile.picture" class="img-avatar profile-picture" alt="User profile picture">
      <img *ngIf="!auth.userProfile.picture" src="assets/img/avatars/gravatar-default.png" class="img-avatar profile-picture" alt="Default profile-picture">

    </a>
  </li>
</ul>

请注意我已尝试使用内置NG2功能以多种不同方式验证和分配数据。

breadcrumb.component.ts

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

当我检查本地存储时，数据确实存在。因此，这使我相信在将数据放入本地存储之前，页面正在呈现。

这是我auth0 service的大部分内容。

authorize.service.ts

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

问题

当有人登录时，如何在完成页面呈现之前确保数据存在？这样我就可以确保向用户显示正确的数据。

Answer 1

我不能发表评论我会写这个作为答案。我有同样的问题，我解决了这个问题：

修改

试试这个：

首先我使用这个让生活更轻松的自定义事件发射器：

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

在auth.service中：

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

在我的HTML中，我有：

<li><a [hidden]="!username" *ngIf="auth.authenticated()">Welcome, {{username}}</a></li>

希望这有帮助！

在Gravatar存在之前使用Auth0重定向的Angular2 Auth

1 个答案: