如何使用AngularFire2做一个路由守卫,等待身份验证检查 [英] How do you make a route guard with AngularFire2 wait for auth check
本文介绍了如何使用AngularFire2做一个路由守卫,等待身份验证检查的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望我的身份验证防护人员等到从Firebase取回身份验证后再重新路由.目前,身份验证保护程序会首先进行检查.
I want my auth guard to wait until I get the auth back from firebase before it reroutes me. Currently, the auth guard check inits first.
我需要在canActivate中使其异步,或者仅在调用后填充canActivate.
I need to make it async in the canActivate, or only populate the canActivate after called.
auth.guard.ts
auth.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService) {
console.log(this.authService.isAuthenticated); // returns false, doesn't async
}
canActivate() {
console.log(this.authService.isAuthenticated); // returns false
return this.authService.isAuthenticated;
}
}
auth.service.ts
auth.service.ts
...
import { AngularFire,
AuthProviders,
AuthMethods,
FirebaseListObservable,
FirebaseObjectObservable } from 'angularfire2';
...
@Injectable()
export class AuthService {
isAuthenticated: boolean = false;
// the problem is setting it to a bool, need to async it (( but this was from official documentation and Pluralsight tuts__
constructor(
public af: AngularFire,
private _router: Router,
private _route: ActivatedRoute ) {
this.af.auth.subscribe((auth)=>{
console.log('called after after auth guard');
if (auth == null) {
this._router.navigate(['/login']);
} else {
this.isAuthenticated = true;
}
}
});
}
那么,如何使AuthGuard的canActivate等待异步布尔值?
该如何将其传递给AuthGuard的canActivate()函数?
推荐答案
It was answer in this issue post on Github.
auth.service.ts:
auth.service.ts:
@Injectable()
export class AuthService {
private _user: firebase.User;
constructor(public afAuth: AngularFireAuth, private db: AngularFireDatabase) {
afAuth.authState.subscribe(user => this.user = user);
}
get user(): firebase.User {
return this._user;
}
set user(value: firebase.User) {
this._user = value;
}
get authenticated(): boolean {
return this._user !== null;
}
}
auth.guard.ts:
auth.guard.ts:
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.auth.afAuth.authState
.take(1)
.map(authState => !!authState)
.do(authenticated => {
if (!authenticated) {
this.router.navigate(['login']);
}
});
}
}
这篇关于如何使用AngularFire2做一个路由守卫,等待身份验证检查的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文