Angular 2 AuthGuard和Firebase Auth会在每次登录页面时重定向

我试图用firebase auth为Angular 2应用程序构建AuthGuard，但有一个问题

加载应用程序后，如果我在

AuthGuard

中签名，由于异步操作，将返回

false

最后的效果是当页面加载时，AuthGuard返回firstime

false

，然后返回

true

，因此每次都会重定向到登录页面而不是根页面。

我认为如果用户未登录，我使用*ngIf仅显示

SignInComponent

，但这不是解决方案，因为平均时间在短时间内都将是SignInComponent可见的

如何解决这个问题不立即重定向到登录页面？

谢谢你的回答

AuthService

@Injectable()
export class AuthService {

  static UNKNOWN_USER = new AuthInfo(null);
  user: Observable<firebase.User>;
  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);

  constructor(private afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe(
      auth => {
        if (auth) {
          const authInfo = new AuthInfo(auth.uid);
          this.authInfo$.next(authInfo);
        } else {
          this.authInfo$.next(AuthService.UNKNOWN_USER);
        }
      },
      err => {
        console.log(err);
      }
    );
  }
}

@Injectable()
export class AuthService {

  static UNKNOWN_USER = new AuthInfo(null);
  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);

  constructor(private afAuth: AngularFireAuth) {}

  getAuthInfo(): Observable<AuthInfo> {
    return this.afAuth.authState.map(
      auth => {
        if (auth) {
          const authInfo = new AuthInfo(auth.uid);
          this.authInfo$.next(authInfo);
          return authInfo;
        } else {
          this.authInfo$.next(AuthService.UNKNOWN_USER);
          return AuthService.UNKNOWN_USER;
        }
      },
      err => {
        console.log(err);
      }
    );
  }

AuthGuard

@Injectable()
export class AuthGuard implements  CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.authInfo$
      .map( authInfo => authInfo.isLoggedIn())
      .take(1)
      .do(allowed => {
        console.log('authguard: ' + allowed);
        if (!allowed) {
           this.router.navigate(['/signin']);
        }
    });
  }
}

@Injectable()
export class AuthGuard implements  CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    if (this.authService.authInfo$.getValue().isLoggedIn()) {
      return true;
    }

    return this.authService.getAuthInfo()
      .map( (authInfo: AuthInfo) => authInfo.isLoggedIn())
      .do(allowed => {
        if (!allowed) {
          this.router.navigate(['/signin']);
          return false;
        } else {
          return true;
        }
      }).take(1);
  }
}

@Injectable（）
导出类AuthGuard实现了CanActivate{
构造函数（专用authService:authService，专用路由器：路由器）{
}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回this.authService.authInfo$
.map（authInfo=>authInfo.isLoggedIn（））
.采取（1）
.do（允许=>{
console.log（'authguard:'+允许）；
如果（！允许）{
this.router.navigate（['/sign']）；
}
});
}
}

对不起，问题重复了

我的解决办法是

AuthService

@Injectable()
export class AuthService {

  static UNKNOWN_USER = new AuthInfo(null);
  user: Observable<firebase.User>;
  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);

  constructor(private afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe(
      auth => {
        if (auth) {
          const authInfo = new AuthInfo(auth.uid);
          this.authInfo$.next(authInfo);
        } else {
          this.authInfo$.next(AuthService.UNKNOWN_USER);
        }
      },
      err => {
        console.log(err);
      }
    );
  }
}

@Injectable()
export class AuthService {

  static UNKNOWN_USER = new AuthInfo(null);
  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);

  constructor(private afAuth: AngularFireAuth) {}

  getAuthInfo(): Observable<AuthInfo> {
    return this.afAuth.authState.map(
      auth => {
        if (auth) {
          const authInfo = new AuthInfo(auth.uid);
          this.authInfo$.next(authInfo);
          return authInfo;
        } else {
          this.authInfo$.next(AuthService.UNKNOWN_USER);
          return AuthService.UNKNOWN_USER;
        }
      },
      err => {
        console.log(err);
      }
    );
  }

@Injectable（）
导出类身份验证服务{
静态未知用户=新身份验证信息（null）；
authInfo$：BehaviorSubject=新的BehaviorSubject（AuthService.UNKNOWN\u用户）；
构造函数（私有afAuth:AngularFireAuth）{}
getAuthInfo（）：可观察{
返回此.afAuth.authState.map(
auth=>{
if（auth）{
const authInfo=新的authInfo（auth.uid）；
this.authInfo$.next（authInfo）；
返回authInfo；
}否则{
this.authInfo$.next（AuthService.UNKNOWN\u用户）；
返回AuthService.UNKNOWN\u用户；
}
},
错误=>{
控制台日志（err）；
}
);
}

AuthGuard

@Injectable()
export class AuthGuard implements  CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.authInfo$
      .map( authInfo => authInfo.isLoggedIn())
      .take(1)
      .do(allowed => {
        console.log('authguard: ' + allowed);
        if (!allowed) {
           this.router.navigate(['/signin']);
        }
    });
  }
}

@Injectable()
export class AuthGuard implements  CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    if (this.authService.authInfo$.getValue().isLoggedIn()) {
      return true;
    }

    return this.authService.getAuthInfo()
      .map( (authInfo: AuthInfo) => authInfo.isLoggedIn())
      .do(allowed => {
        if (!allowed) {
          this.router.navigate(['/signin']);
          return false;
        } else {
          return true;
        }
      }).take(1);
  }
}

@Injectable（）
导出类AuthGuard实现了CanActivate{
构造函数（专用authService:authService，专用路由器：路由器）{
}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察的布尔值{
if（this.authService.authInfo$.getValue（）.isLoggedIn（））{
返回true；
}
返回此.authService.getAuthInfo（）
.map（（authInfo:authInfo）=>authInfo.isLoggedIn（））
.do（允许=>{
如果（！允许）{
this.router.navigate（['/sign']）；
返回false；
}否则{
返回true；
}
}).采取（1）项措施；
}
}

对不起，问题重复了

我的解决办法是

AuthService

@Injectable()
export class AuthService {

  static UNKNOWN_USER = new AuthInfo(null);
  user: Observable<firebase.User>;
  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);

  constructor(private afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe(
      auth => {
        if (auth) {
          const authInfo = new AuthInfo(auth.uid);
          this.authInfo$.next(authInfo);
        } else {
          this.authInfo$.next(AuthService.UNKNOWN_USER);
        }
      },
      err => {
        console.log(err);
      }
    );
  }
}

@Injectable()
export class AuthService {

  static UNKNOWN_USER = new AuthInfo(null);
  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);

  constructor(private afAuth: AngularFireAuth) {}

  getAuthInfo(): Observable<AuthInfo> {
    return this.afAuth.authState.map(
      auth => {
        if (auth) {
          const authInfo = new AuthInfo(auth.uid);
          this.authInfo$.next(authInfo);
          return authInfo;
        } else {
          this.authInfo$.next(AuthService.UNKNOWN_USER);
          return AuthService.UNKNOWN_USER;
        }
      },
      err => {
        console.log(err);
      }
    );
  }

@Injectable（）
导出类身份验证服务{
静态未知用户=新身份验证信息（null）；
authInfo$：BehaviorSubject=新的BehaviorSubject（AuthService.UNKNOWN\u用户）；
构造函数（私有afAuth:AngularFireAuth）{}
getAuthInfo（）：可观察{
返回此.afAuth.authState.map(
auth=>{
if（auth）{
const authInfo=新的authInfo（auth.uid）；
this.authInfo$.next（authInfo）；
返回authInfo；
}否则{
this.authInfo$.next（AuthService.UNKNOWN\u用户）；
返回AuthService.UNKNOWN\u用户；
}
},
错误=>{
控制台日志（err）；
}
);
}

AuthGuard

@Injectable()
export class AuthGuard implements  CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.authInfo$
      .map( authInfo => authInfo.isLoggedIn())
      .take(1)
      .do(allowed => {
        console.log('authguard: ' + allowed);
        if (!allowed) {
           this.router.navigate(['/signin']);
        }
    });
  }
}

@Injectable()
export class AuthGuard implements  CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    if (this.authService.authInfo$.getValue().isLoggedIn()) {
      return true;
    }

    return this.authService.getAuthInfo()
      .map( (authInfo: AuthInfo) => authInfo.isLoggedIn())
      .do(allowed => {
        if (!allowed) {
          this.router.navigate(['/signin']);
          return false;
        } else {
          return true;
        }
      }).take(1);
  }
}

@Injectable（）
导出类AuthGuard实现了CanActivate{
构造函数（专用authService:authService，专用路由器：路由器）{
}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察的布尔值{
if（this.authService.authInfo$.getValue（）.isLoggedIn（））{
返回true；
}
返回此.authService.getAuthInfo（）
.map（（authInfo:authInfo）=>authInfo.isLoggedIn（））
.do（允许=>{
如果（！允许）{
this.router.navigate（['/sign']）；
返回false；
}否则{
返回true；
}
}).采取（1）项措施；
}
}

请解释这是如何解决您的问题的，而不是给出一堵代码墙。请解释这是如何解决您的问题的，而不是给出一堵代码墙。