时间戳

首页 > 解决方案 > Angular-Route Guard 总是在导航前重定向到主页

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

问题描述

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

例如。

当前行为

检查令牌。

令牌返回 false。

重定向到“/”

然后导航到“/me/courses”

预期行为

检查令牌。

令牌返回 false

导航到“/我/课程”

这是我的路线守卫

  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()
        }
      );
  }

标签： angularangular-routingangular-route-guards

解决方案

您遇到的问题是您返回的是错误的。这告诉系统完全阻止导航。

如果您希望它转到不同的 URL，例如“/me/courses”，那么您需要从 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;
  }

推荐阅读