[英]How to get AngularFire2 authentication as an observable?
我希望經過身份驗證的設置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;
}
}
我寫了一篇文章,把一些零碎的東西連在一起。 您可能需要創建如下的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身份驗證文章 。
只需訂閱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")
}
});
使用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>
authState
Observable<firebase.User>
canActivate()
返回Observable<boolean> | Promise<boolean> | boolean
Observable<boolean> | Promise<boolean> | boolean
authState
會發出null
,如果沒有認證else發出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(['/']);
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.