0
ログインしようとすると問題が発生します。ステップバイステップ：
- ユーザーがログインボタンをクリックします。
- Auth0がログインを行っているようです。
- ユーザープロファイルはlocalStorageに保存されます。
- ログインに成功すると、内部ページがロードされ、ユーザーはシステムを使用できます。すべてのページにプロファイルデータ（localStorage内）が必要です。角4のログインエラーを伴うAuth0
問題
それは最初のログインでシステムに入力することは不可能です。空っぽです！！！たとえログインが成功したとしても！私はlocalStorageが空のときにシステムをログアウトするようにフローを設定したので、ログインページにリダイレクトされます。 しかし、もう一度試してみると、すべてうまくいく！なぜ私は考えていない。
コードに従います。
のAuthService
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from './api.service';
import { Profile } from '../models/Profile';
import auth0 from 'auth0-js';
import 'rxjs/add/operator/filter';
@Injectable()
export class AuthService {
auth0 = new auth0.WebAuth({
// Credentials
});
constructor(protected router: Router, protected api: ApiService) {}
public login(): void {
this.auth0.authorize();
}
public logout(): void {
localStorage.removeItem('profile');
localStorage.removeItem('id_token');
localStorage.removeItem('expires_at');
localStorage.removeItem('access_token');
this.router.navigate(['/']);
}
private setSession(authResult): void {
const profile = authResult.idTokenPayload;
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
localStorage.setItem('expires_at', expiresAt);
localStorage.setItem('id_token', authResult.idToken);
localStorage.setItem('access_token', authResult.accessToken);
this.api.getUsuario(profile.name)
.subscribe(res => {
profile.nivel = res.nivel;
profile.idClube = res.idClube;
localStorage.setItem('profile', JSON.stringify(profile));
});
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
window.location.hash = '';
this.setSession(authResult);
this.router.navigate(['/calendario_']);
} else if (err) {
this.router.navigate(['/login']);
console.error(err);
}
});
}
public isAuthenticated(): boolean {
const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
return new Date().getTime() < expiresAt;
}
}
LoginComponent
import { Component } from '@angular/core';
import { AuthService } from '../../services/auth.service';
@Component({
moduleId: module.id,
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(protected auth: AuthService) { }
}
成分（ログインに成功した後）
import { Component, OnInit } from '@angular/core';
import { Profile } from '../../models/Profile';
import { Calendario } from '../../models/Calendario';
import { ApiService } from '../../services/api.service';
import { AuthService } from '../../services/auth.service';
@Component({
moduleId: module.id,
selector: 'app-calendarioproximo',
templateUrl: './calendarioProximo.component.html'
})
export class CalendarioProximoComponent implements OnInit {
protected title: string;
protected dataAtual: any;
protected loading = true;
protected profile: Profile;
protected model: Calendario[] = [];
protected calendario: Calendario[] = [];
constructor(protected api: ApiService, protected auth: AuthService) { }
getCalendario() {
this.api.getCalendario(this.profile.idClube)
.subscribe(res => {
this.loading = true;
this.model = res;
this.api.getData()
.subscribe(data => {
this.dataAtual = data.dataCompleta;
for (let cont = 0; cont < this.model.length && this.calendario.length < 5; cont++) {
if (this.model[cont].data >= this.dataAtual) {
this.calendario[this.calendario.length] = this.model[cont];
}
}
this.loading = false;
}, err => console.error(err));
});
}
ngOnInit() {
this.title = 'Calendário Próximo';
this.profile = new Profile();
// HERE!
JSON.parse(localStorage['profile']) ? this.profile = JSON.parse(localStorage['profile']) : this.auth.logout();
this.getCalendario();
window.scrollTo(0, 0);
}
}