背景
在我的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();
}
}
问题
当有人登录时，如何在完成页面呈现之前确保数据存在？这样我就可以确保向用户显示正确的数据。
答案 0 :(得分：0)
我不能发表评论我会写这个作为答案。 我有同样的问题，我解决了这个问题：
修改
试试这个：
首先我使用这个让生活更轻松的自定义事件发射器：
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>
希望这有帮助！