AuthGuard在检查用户之前不等待身份验证完成

问题描述

我在这里阅读了该指南: https://angular.io/docs/ts/latest/guide/router.html

I've read the guide here: https://angular.io/docs/ts/latest/guide/router.html

似乎很简单，但是，我不确定如何在身份验证保护(canActivate)中使用angularfire2的身份验证.我尝试过的是:

Seems pretty straightforward, however, I'm not sure how to use angularfire2's authentication within an auth guard (canActivate). What I've tried is:

AuthService

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

@Injectable()
export class AuthService {

  private user: any;

  constructor(private af: AngularFire) {
    this.af.auth.subscribe(user => {
      this.user = user;
    })
  }

  get authenticated(): boolean {
    return this.user ? true : false;
  }

}

AuthGuard

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) { }

  canActivate(): Observable<boolean> | boolean {
    if (this.authService.authenticated)
      return true;

    this.router.navigate(['/login']);
    return false;
  } 

}

我还向引导程序提供程序添加了 AuthService .

I've also added AuthService to bootstrap providers.

这种工作方式很好，但是，我的主要问题是，当我刷新(或初始加载)具有AuthGuard的页面时，它总是将我重定向到登录页面，因为AuthGuard不等待身份验证响应.有没有办法等待认证完成(即使认证失败)，然后然后检查用户是否已通过认证?

This sort of works fine, however, my main problem is when I refresh (or initially load) the page on that has AuthGuard it always redirects me to the login page since the AuthGuard doesn't wait for the authentication response. Is there a way to wait for the authentication to finish (even if it's failed) and then check whether the user is authenticated?

推荐答案

问题出在您的代码上.在AuthGuard中，您检查authenticated()方法的结果，由于用户属性仍未设置，该方法很可能返回false.试试这个:

The problem is with your code. In the AuthGuard you check the result of authenticated() method that will most probably return false as the user property is still not set. Try this:

AuthService :

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

@Injectable()
export class AuthService {

  private user: any;

  constructor(private af: AngularFire) { }
  setUser(user) { this.user = user; }
  getAuthenticated(): Observable<any> { return this.af.auth; }
}

AuthGuard :

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) { }

  canActivate(): Observable<boolean> | boolean {
    // here check if this is first time call. If not return 
    // simple boolean based on user object from authService
    // otherwise:

    return this.authService.getAuthenticated.map(user => {
          this.authService.setUser(user);
          return user ? true : false;
    })

  } 
}

这篇关于AuthGuard在检查用户之前不等待身份验证完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！