在angular中實現canActivate auth Guard

Question

我有一個帶有此函數的服務，該函數在令牌無效時返回true或false

loggedIn() {
return this.http.get('http://localhost:3000/users/validateToken')
  .map(res => res.json()).map(data => data.success);
}

我有一個可以在使用此功能的受保護路由上激活的身份驗證防護。

  canActivate(){
    this.authService.loggedIn().subscribe(res => {
      if(res) {
        return true;
      }
      else {
        this.router.navigate(['/login'])
        return false;
      }
    })
  }

但是我得到這個錯誤。

錯誤地實現了接口“ CanActivate”。 屬性“ canActivate”的類型不兼容。 類型'（）=> void'不能分配給類型'（route：ActivatedRouteSnapshot，state：RouterStateSnapshot）=>布爾值| 承諾| 觀察者...'。 不能將類型“ void”分配給類型“ boolean | 承諾| 可觀察的”。

我如何才能在這里實現我要執行的操作？

Answer 1

canActivate函數必須返回一個布爾值，一個布爾值的promise或一個可觀察的布爾值。

就您而言，您什么也不返回。 可能是因為您忽略了函數的return 。

但是，如果添加它將不起作用，因為那樣的話，您將返回訂閱，簽名不接受該訂閱。

您可以執行以下操作：

canActivate() {
  return this.authService.loggedIn().map(res => {
    if(!res) {
      this.router.navigate(['/login']);
    }
    return res;
  });
}

使用此代碼，您可以遵守簽名並保留路由邏輯。