2017-05-21 5 views
1

서비스 클래스에 AngularFire2 v4 인증 상태를 캡슐화하려고하므로 사용자 인증 여부를 확인하는 단일 방법이 있습니다.AngularFire2 v4로 인증 상태 확인

내가의 V4 업그레이드 가이드 다음 해요 : 심지어 authenticated 항상 false을 반환

export class AuthService { 

    user: Observable<firebase.User>; 

    constructor(
    private angularFireAuth: AngularFireAuth, 
) { 
    this.user = this.angularFireAuth.authState; 
    } 

    get isAuthenticated(): boolean { 
    let authenticated = false; 
    this.user.take(1).subscribe(user => authenticated = user !== null); 
    return authenticated; 
    } 

} 

나는 데 문제가 있습니다 : 여기 https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md

나의 서비스 클래스의 관련 부분이다 user이 널이 아닐 때 내가 도대체 ​​뭘 잘못하고있는 겁니까? subscribe 내부 콜백은 동 기적으로 호출 할 수 있기 때문에 아직 읽을 수없는 값이없는 경우 비동기 적으로 관찰 또는에서 읽을 수있는 값이있는 경우

답변

1

false를 반환합니다. 귀하의 경우에는 그렇지 않으므로 실제로 그 값을 기다리지 않고 초기 false을 반환하고 있습니다.

이제
get isAuthenticated(): Observable<boolean> { 
    return this.user.last().map(user => user !== null); 
} 

, 당신은 async 파이프를 사용한다, 템플릿에 그 게터를 사용하는 :

은 당신이 뭔가를 할 수 있습니다. 다음과 같이 입력하십시오 : *ngIf="(isAuthenticated | async)".

참고 .last()에 대한 .take(1)도 변경되었으므로 여기에 더 적합하다고 생각합니다.

정확히 무엇이 일어나고 있는지 보여줍니다.

관찰 가능한 동 기적으로 호출되는 :

const source = Rx.Observable.range(0, 2); 
 

 
function isAuthenticated() { 
 
    let authenticated = false; 
 
    
 
    source.last().subscribe((x) => { 
 
    console.log('New value: ' + x); 
 
     
 
    authenticated = true; 
 
    }); 
 
    
 
    return authenticated; 
 
} 
 

 
console.log(isAuthenticated()) 
 
console.log(isAuthenticated())
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>

관찰 가능한 비동기 적으로 호출되는 :

const source = Rx.Observable.range(0, 2).delay(1000); 
 

 
function isAuthenticated() { 
 
    let authenticated = false; 
 
    
 
    source.last().subscribe((x) => { 
 
    console.log('New value: ' + x); 
 
     
 
    authenticated = true; 
 
    }); 
 
    
 
    return authenticated; 
 
} 
 

 
console.log(isAuthenticated()) 
 
console.log(isAuthenticated())
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>

+1

감사합니다. @ 단 지거 (Daanziger) 감사합니다. 사용자를 AngularFire2의 관찰 가능으로 전환하면 불행히도 내 필요에 따라 상황이 조금 더 어려워졌습니다. – Brandon