首页 文章

如何将AngularFire2身份验证作为可观察对象？

提问于
浏览 次
5

我希望经过身份验证的设置isAuthenticated：成功联合Google登录后boolean为True，或者用户已登录状态 .

import {Injectable} from '@angular/core';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';


//this current code is not making sense. Any suggestion 
//to make it an Observable for Signin and Logout?
@Injectable()
export class AuthService {
  isAuthenticated:boolean = false;
  authObj: Observable<any>;

  constructor(public af:AngularFire) {
    this.authObj = af.auth;
  }

  signin() {
    //I want to make AngularFire2 Authentication token/obj an Observable. So this will keep emitting an Observable
    //that return True.... after successful Federated Google Signin. I want my other component to subscribe to this Observable.
    return this.authObj.do(val => this.af.auth.login());
    this.isAuthenticated = true;
  }

}
angular angularfire2

3 回答

  • 3

    我写了一篇文章，把一些零碎的东西连在一起 . 您可能需要创建如下的Auth服务：

    import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';
import { Observable } from 'rxjs/Observable';

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AngularFire } from 'angularfire2';

@Injectable()
export class AuthGuard implements CanActivate{
  public allowed: boolean;

  constructor(private af: AngularFire, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.af.auth.map((auth) =>  {
      if(auth == null) {
        this.router.navigate(['/login']);
        return false;
      } else {
        return true;
      }
    }).first()
  }
}

    查看AngularFire2 Authentication article了解更多信息 .

    回复于
  • 5

    只需订阅auth对象，以便在有用户对象时收到通知......

    var auth = this.af.auth.subscribe( (user) => {
    debugger;
    if (user) {
      // User signed in!
      var uid = user.uid;
      console.log(uid)
    } else {
      // User logged out
      console.log("no user")
    }
  });
    回复于
  • 0

    使用 Angular v6 ， Firebase v5.0.* 和 angularfire2 5 rc 10 ，您可以执行以下操作 .

    ...
import { AngularFireAuth } from 'angularfire2/auth';
import { map } from 'rxjs/operators';

...
export class DashboardGuard implements CanActivate, CanActivateChild {

  constructor(private router: Router, private auth: AngularFireAuth) { }
  // #2
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    // #1
    return this.auth.authState.pipe(
      // #3
      map((user: any) => user !== null) // <--- [1]
    );

  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.canActivate(route, state);
  }

}

    直接使用 AngularFireAuth 的 authState 将其向下管道并检查用户是否不等于null [1] .

    • authState 返回 Observable<firebase.User>

    • canActivate() 返回 Observable<boolean> | Promise<boolean> | boolean

    • 订阅 authState 将发出 null 如果未经过身份验证，则会发出 firebase.User （参见下面的屏幕截图） .

    我刚刚发现我现在可以使用最新版本执行此操作 - >在 canActivate 中返回 Observable<boolean> ...因为在最新版本中虽然在文档中它说 canActivate 返回 Observable<boolean> 但它给了我很多错误 . 但是现在好了！

    顺便说一句我只是想分享我在角度v6之前写道路防护的方法 . 使用承诺

    constructor(private router: Router, private afAuth: AngularFireAuth) {}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  const promise = new Promise(
    (resolve, reject) => {
      this.afAuth.authState.subscribe((state: any) => {
        resolve(state !== null);
      });
    }
  );

  return promise.then((data: boolean) => {
    if (data) {
      return data;
    } else {
      this.router.navigate(['/']);
    }
  });
}

    enter image description here

    回复于

相关问题