时间戳

首页 > 解决方案 > 守卫总是返回真

angular - 守卫总是返回真

问题描述

我在 Angular 应用中有两个非常相似的守卫。首先检查的是用户登录：

// isUser guard

export class isUser implements CanActivate {
  constructor(
    private fireAuth: AngularFireAuth,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      return this.fireAuth.authState.pipe(
        take(1),
        map(authState => !!authState),
        tap(auth => !auth ? this.router.navigate(['/']) : true)
      )
  }
}

这一项工作正常：当用户未登录时，不允许他打开受保护的页面。

下一个守卫几乎相同，但它检查用户是否未登录：

export class isGuest implements CanActivate {
  constructor(
    private fireAuth: AngularFireAuth,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      return this.fireAuth.authState.pipe(
        take(1),
        map(authState => !!authState),
        tap(auth => auth ? this.router.navigate(['/']) : true)
      )
  }
}

唯一的区别是：!auth ? this.router.navigate(['/'])vs auth ? this.router.navigate(['/'])。

但是isUser守卫工作得很好，并且isGuest总是允许用户页面。我做错了什么，为什么它不能工作？

标签： angularfirebaseangularfire2angular-routingangular-guards

解决方案

两个 observables 发出的值是相同的: !!authState，但它们不应该，因为一个应该只在用户通过身份验证时发出 true，而另一个应该只在用户未通过身份验证时发出 true。

map()并tap()做不同的事情。

map()将发出的事件转换为其他事件。

tap()产生副作用并将发出的事件保持原样。

推荐阅读