Question

我正在尝试将AngularFire2 v4身份验证状态封装在服务类上，因此我只有一种方法可以检查用户是否经过身份验证。

我关注v4升级指南：https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md

以下是我的服务类的相关部分：

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

}

我遇到的问题是authenticated始终返回false，即使user不为空。我做错了什么？

Answer 1

它返回false，因为如果有值要在observable中读取，或者在没有值尚未读取时，将同步调用subscribe内的回调。在你的情况下没有，所以你实际上是在没有等待那些值的情况下返回初始false。

你可以这样做：

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

现在，要在模板中使用该getter，您应该使用async管道。类似于：*ngIf="(isAuthenticated | async)"。

注意我还更改了.last()的.take(1)，我认为这更有意义。

准确显示此处发生的事情。

可观察同步调用：

＆＃13;

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())

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>

＆＃13;

可观察异步调用：

＆＃13;

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())

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>

＆＃13;

使用AngularFire2 v4检查身份验证状态

1 个答案: