你如何让 AngularFire2 的路由守卫等待身份验证检查

问题描述

我希望我的 auth 守卫等到我从 firebase 取回 auth，然后再重新路由我.目前，auth 守卫检查首先启动.

我需要在 canActivate 中使其异步，或者只在调用后填充 canActivate.

auth.guard.ts

import { Injectable } from '@angular/core';从 '@angular/router' 导入 { Router, CanActivate };从 './auth.service' 导入 { AuthService };@Injectable()导出类 AuthGuard 实现 CanActivate {构造函数(私有 authService:AuthService){console.log(this.authService.isAuthenticated);//返回 false，不异步}可以激活(){console.log(this.authService.isAuthenticated);//返回假返回 this.authService.isAuthenticated;}}

auth.service.ts

...导入 { AngularFire，身份验证提供者，身份验证方法，FirebaseListObservable，FirebaseObjectObservable } 来自 'angularfire2';...@Injectable()导出类 AuthService {isAuthenticated: boolean = false;//问题是将其设置为 bool，需要对其进行异步 (( 但这是来自官方文档和 Pluralsight tuts__构造函数(公共 af:AngularFire，私有_router:路由器，私人 _route: ActivatedRoute ) {this.af.auth.subscribe((auth)=>{console.log('在认证保护之后调用');如果(身份验证 == 空){this._router.navigate(['/login']);} 别的 {this.isAuthenticated = true;}}});}

那么如何让 AuthGuard 的 canActivate 等待异步布尔值?

我如何将它传递给 AuthGuard 的 canActivate() 函数?

解决方案

这是在 this 中的答案 在 Github 上发布帖子.

auth.service.ts:

@Injectable()导出类 AuthService {私人 _user: firebase.User;构造函数(公共afAuth:AngularFireAuth，私有数据库:AngularFireDatabase){afAuth.authState.subscribe(user => this.user = user);}获取用户():firebase.User {返回 this._user;}设置用户(值:firebase.User){this._user = 值；}获得认证():布尔{返回 this._user !== null;}}

auth.guard.ts:

@Injectable()导出类 AuthGuard 实现 CanActivate {构造函数(私有身份验证:AuthService，私有路由器:路由器){}可以激活(下一个:ActivatedRouteSnapshot，state: RouterStateSnapshot): Observable|Promise|布尔{返回 this.auth.afAuth.authState.take(1).map(authState => !!authState).do(经过身份验证的 => {如果(！认证){this.router.navigate(['登录']);}});}}

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.

I need to make it async in the canActivate, or only populate the canActivate after called.

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

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

So how can I make the AuthGuard's canActivate wait for an async boolean?

And how do I pass it to the AuthGuard's canActivate() function?

解决方案

It was answer in this issue post on Github.

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:

@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 的路由守卫等待身份验证检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！