。私はこれを理解する助けが必要です。角度2 - 私は観測、約束や状態の狂気に迷ってしまいましたAngularfire 2認証状態
私はAngularfire2モジュールと私の角度2のアプリケーションで登録/サインイン/サインアップ機能を実装しようとしています。私はログイン機能から始めています。私は基礎が働いている。私はログインして新しいページにリダイレクトできます。ここまでは順調ですね。私のテンプレートでは、ユーザーがログインしているかどうかをチェックしています。そしてここで問題を始める。私は現在のユーザーがログインしているかどうかを確認するのに苦労しています。
Login.components.ts
import { Component, OnInit } from '@angular/core';
import {Validators, FormGroup, FormBuilder } from '@angular/forms';
import { AuthService } from '../auth.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
form: FormGroup;
error = false;
errorMessage = '';
constructor(private fb:FormBuilder, private authService:AuthService, private router:Router) {}
ngOnInit() {
this.form = this.fb.group({
email: ['', Validators.required],
password: ['', Validators.required]
});
}
onLogin() {
this.authService.loginUser(this.form.value.email, this.form.value.password)
.subscribe(
() => this.router.navigate(['/'])
)
}
}
Auth.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import {FirebaseAuth} from 'angularfire2/index';
import {Observable, Subject} from 'rxjs/Rx';
@Injectable()
export class AuthService {
constructor(private auth: FirebaseAuth, private router:Router) { }
loginUser(email, password):Observable<any> {
return this.fromFirebaseAuthPromise(this.auth.login({email,password}));
}
logout() {
this.auth.logout();
this.router.navigate(['/']);
}
fromFirebaseAuthPromise(promise):Observable<any> {
const subject = new Subject<any>();
promise
.then(res => {
subject.next(res);
subject.complete();
},
err => {
subject.error(err);
subject.complete();
});
return subject.asObservable();
}
isAuthenticated(): Observable<any> {
const state = new Subject<any>();
this.auth.subscribe((user) => {
if (user) {
var uid = user.uid;
console.log('the user id:' + uid)
state.next(true)
} else {
console.log("no user")
state.next(false)
}
})
return state.asObservable();
}
}
home.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth/auth.service';
import { AuthInfo } from './auth/auth-info';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
isAuthenticated = false;
constructor(private authService:AuthService) {
this.authService.isAuthenticated().subscribe(
authStatus => this.isAuthenticated = authStatus
);
console.log('isAuthenticated:' + this.isAuthenticated);
}
isAuth() {
return this.isAuthenticated;
}
onLogout() {
this.authService.logout();
}
ngOnInit() {
}
}
home.component.html
<h2>
Please login or register to use the app
</h2>
<a [routerLink]="['/login']" *ngIf="!isAuth()">Login here</a>
<a [routerLink]="['/register']" *ngIf="!isAuth()">Register here</a>
<a *ngIf="isAuth()" (click)="onLogout()" style="cursor: pointer;">Logout</a>
私は次の結果を参照してくださいにloginningとき、私は私のコンソールを見てください。
{
the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2
isAuthenticated: false
}
だから私はログインに成功する必要がありますか?しかし、認証が正しいかどうかを確認するときに失敗するようです。 HomeComponent
の* ngIf = "!isAuth()"は機能しません。ブラウザでハードリフレッシュを行う場合のみです。
ハードリフレッシュした後、私はまだコンソールに表示:あなたはそんなに複雑いる
{
the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2
isAuthenticated: false
}