Angular - Route Guard всегда перенаправляет на домашнюю страницу перед навигацией

Question

Я пытаюсь установить охрану маршрута на моем сайте. Он проверяет токен, а затем возвращает истину или ложь. Предполагается перенаправить, если он возвращает ложь. Тем не менее, когда он должен перемещаться, он сначала идет по маршруту "/", а затем идет по нужному маршруту.

Например.

Текущее поведение

Проверьте токен.

Токен возвращает false.

Перенаправляет на "/"

Затем переходит на "/ me / курсы"

Ожидаемое поведение

Проверка на токен.

Токен возвращает false

Переходит к "/ me / courses"

Это мой маршрутный охранник

  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    var API_PATH = "auth/user/"
    var isAuthenticated = this.authService.isLoggedIn()

    if(!isAuthenticated) {
      return true
    }

    this.router.navigateByUrl("/me/courses")
    return false
  }

Это мой код для проверки токена

  loggedIn(autoFetchUserDetails = false) {
        if (autoFetchUserDetails) {
        this.fetchUserDetails();
    }
}

  isLoggedIn() {
      const token = this.globalService.getAuthToken();
      if (token) {
          if (!this.isAuth) {
            this.loggedIn(true);
          }
          return true;
      } else {
          if (this.isAuth) {
            this.logOut();
          }
          return false;
      }
    }

  fetchUserDetails() {
      const API_PATH = 'auth/user/';
      const SELF = this;
      this.api.getUrl(API_PATH).subscribe(
        data => {
          this.isAuth = true;
          this.user = data;
        },
        err => {
          this.globalService.deleteCookie(this.globalService.authStorageKey);
          this.logOut()
        }
      );
  }

Answer 1

Проблема в том, что вы возвращаете ложь. Это говорит системе полностью блокировать навигацию.

Если вы хотите go для другого URL, например, "/ me / courses", вам нужно вернуть объект UrlTree из Route Guard вместо false.

  canActivate(): boolean | UrlTree {
    var API_PATH = "auth/user/"
    var isAuthenticated = this.authService.isLoggedIn()

    if(!isAuthenticated) {
      return true
    }

    const tree: UrlTree = this.router.parseUrl("/me/courses");
    return tree;
  }