canActivate 中的 navigateByUrl

Question

我在這里看到一些示例代碼：

https://medium.com/javascript-everyday/keep-data-in-the-state-object-during-navigation-in-angular-5657af156fb8

具體代碼為：

  canActivate(next: ActivatedRouteSnapshot, { url }: RouterStateSnapshot): boolean 
  {
       if (!this.authService.isLoggedIn) {
             this.router.navigateByUrl('/auth', { state: { redirect: url } });
       }

       return this.authService.isLoggedIn;
  }

如果 this.authService.isLoggedIn = false，這里到底會發生什么？

然后在此 function 中調用 navigateByUrl，在返回 this.authService.isLoggedIn之前，這將如何表現？ function 會“立即”返回“false”作為值嗎？ 或者 CanActivate 會被 navigateByUrl function 以某種方式“中止”嗎？

解釋起來有點棘手，但是從不再相關的 CanActivate function 返回一個值似乎很奇怪......因為您已經離開了請求的頁面......

Answer 1

它將返回false ，但另外它將重定向user 。

當您嘗試導航到只有登錄用戶才能導航的某些路線時，這很有用。 因此，如果用戶未登錄，您可能會將他重定向到Login Page並返回false 。 當您返回false時，當前導航將被取消。

class 可以實現的接口，作為決定是否可以激活路由的守衛。 如果所有守衛都返回 true，則導航繼續。 如果任何守衛返回 false，導航將被取消。

您還可以返回UrlTree ，在這種情況下，當前導航將被取消並開始新的導航。

如果任何守衛返回一個 UrlTree，則當前導航被取消，並且新的導航開始到從守衛返回的 UrlTree。