Angular- Route Guard 在导航之前总是重定向到主页

Question

我正在尝试在我的网站上实施路由保护。它检查令牌，然后检查 returns true 或 false。如果它 returns false，它应该重定向。但是，当它应该导航时，它会先转到“/”路线，然后再转到所需的路线。

例如

当前行为

检查令牌。

令牌returns false。

重定向到“/”

然后导航到“/me/courses”

预期行为

检查令牌。

令牌returns 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

你的问题是你 return 是假的。这告诉系统完全阻止导航。

如果你想让它转到不同的 URL，例如“/me/courses”，那么你需要 return 来自 Route Guard 的 UrlTree 对象，而不是 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;
  }

Angular- Route Guard 在导航之前总是重定向到主页

Angular- Route Guard always redirects to home page before navigation

angular-routing

angular

angular-route-guards