[英]How to get AngularFire2 authentication as an observable?
I want to after authenticated set isAuthenticated:boolean to True after successful Federated Google Sign-in, or user is signed in state. 我希望经过身份验证的设置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;
}
}
I wrote a piece that takes the bits and pieces and joins them together. 我写了一篇文章,把一些零碎的东西连在一起。 You might have to create an Auth Service like this:
您可能需要创建如下的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()
}
}
Check the AngularFire2 Authentication article for more info. 有关详细信息,请查看AngularFire2身份验证文章 。
Just subscribe to the auth object to get notified when there is a user object or not... 只需订阅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")
}
});
With Angular v6
, Firebase v5.0.*
and angularfire2 5 rc 10
you can do something like this. 使用
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);
}
}
Directly with AngularFireAuth
's authState
just pipe it down and check if user is not equal to null [1]
. 直接使用
AngularFireAuth
的authState
其向下管道并检查用户是否不等于null [1]
。
authState
returns Observable<firebase.User>
authState
返回Observable<firebase.User>
authState
Observable<firebase.User>
canActivate()
returns Observable<boolean> | Promise<boolean> | boolean
canActivate()
返回Observable<boolean> | Promise<boolean> | boolean
Observable<boolean> | Promise<boolean> | boolean
authState
will emit null
if not authenticated else emits firebase.User
(see screenshot below). authState
会发出null
,如果没有认证else发出firebase.User
(见下图)。 I've just discovered that I can now do this with the latest versions -> return an Observable<boolean>
in canActivate
... Because in the last versions although in the documentation it says that canActivate
returns Observable<boolean>
it gives me tons of errors. 我刚刚发现我现在可以使用最新版本执行此操作 - >在
canActivate
返回一个Observable<boolean>
...因为在最后的版本中虽然在文档中说canActivate
返回Observable<boolean>
但它给了我吨错误。 but now yea! 但是现在好了!
btw I just want to share how I write route guards before angular v6. 顺便说一句我只是想分享我在角度v6之前写道路防护的方法。 using promises
使用承诺
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.