在從 authGuard 的 canActivate 接收到 false 時進行路由器重定向

Question

我設置了多個身份驗證防護並在 canActivate 中使用它們。 通常我有router.navigate(["/error",403])在守衛本身，但我已經開始組合不同的守衛所以例如我在某些組件中有守衛 A 和守衛 B 我使用 A 一些使用 B 和一些使用邏輯 A 或 B。這使得來自守衛內部的路由無法使用，當守衛返回錯誤路由時，路由不會做任何事情。 從我的守衛返回 false 后，我可以讓 Angular 路由器重定向到我的/error/403頁面嗎？ 我聽說將通配符設置為 403 有效，但設置后我沒有看到任何變化。 從看起來如果guard返回false angular不會做任何事情，我沒有收到任何控制台消息並且頁面不會重定向到任何地方。 我怎樣才能改變這種行為？

Answer 1

canActivate可以返回，除了true / false ，一個UrlTree ：

  constructor(private router: Router) {}

  canActivate(snapshot: ActivatedRouteSnapshot): boolean | UrlTree {
    return someTest(snapshot) ? true : this.router.createUrlTree(['/', 'error', '403']);
  }

Answer 2

你總是可以擴展你的守衛並返回一個UrlTree 。 因此，任何共享邏輯都在您的抽象類中：

export class GuardA extends Guard403 implements CanActivate {
  contructor(router: Router) {
    super(router);
  }

  canActivate(): Observable<boolean | UrlTree> {
    return this.canThisReallyActivateA().pipe(
      map((canActivate) => canActivate || this.cantActivate;
    )
  }
}

export class GuardB extends Guard403 implements CanActivate {
  contructor(router: Router) {
    super(router);
  }

  canActivate(): Observable<boolean | UrlTree> {
    return this.canThisReallyActivateB().pipe(
      map((canActivate) => canActivate || this.cantActivate;
    )
  }
}

export abstract class Guard403 {
  readonly cantActivate = this.router.createUrlTree(['/errror', '403']);

  constructor(protected router: Router) {}
}