AuthGuard 可以激活到函數結束並返回 false 而不是等待訂閱返回 true

Question

我正在制作一個 Angular 4 網絡應用程序。 我需要保護我的路由，所以我使用AuthGuard和CanActivate來檢查用戶是否可以訪問某個路由。

CanActivate首先檢查id是否在sessionStorage否則它會檢查我的后端是否用戶被授權。 如果我在sessionStorage單擊一個帶有id的項目，它會進入checkIfIDInStorage它工作正常，但是如果它進入 else 並調用我的 API，它會轉到函數的末尾並在調用之前返回 false返回 true 如果我在canActivate刪除return false它仍然不起作用。 如果我在看到它返回 true 后再次單擊該項目，它可以正常工作。

控制台輸出

can activate else
before return false
in subscribe if
true
in store

Guard.ts

canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
{
  const id = route.params.id;
  if (this.checkIfIDInStorage(id)) {
    console.log("checking id");
    return true;
  }
  else {
    console.log("in can activate else");
    this.API.checkProjectOwnership(id).subscribe((data) =>
    {
      console.log("in subscribe if");
      if (data.type === 'AL') {
        console.log("true");
        this.storeProjectID(id);
        return true;
      }
      else  {
        console.log("in subscribe else ");
        this.router.navigate(['/dashboard']);
      }
    });
  }
  console.log("before return false");
  return false;
}

storeProjectID(id: string) {
  console.log("in store");
  this.session.store('id', id);
  return true;
}

getProjectID() {
  return this.session.retrieve('id');
}

checkIfIDInStorage(id: string) {
  const storedID = this.getProjectID();
  return (id ===  storedID);
}

API.service.ts

  checkProjectOwnership(params: URLSearchParams): Observable<any> {
    const URL = `${this.API}/projects/ownership?id=${params}`;
    return this.auth.refreshToken()
      .flatMap(() => this.authHttp.get(URL, this.headers))
      .map((response: Response) => response.json())
      .share()
      .catch(this.handleError);
  }

Answer 1

我能夠通過返回一個 observable 來解決它。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
{
  const id = route.params.id;
  return new Observable<boolean>((observer) =>
  {
    if (this.checkIfIDInStorage(id)) {
      observer.next(true);
      observer.complete();
    }
    else {
      const params = new URLSearchParams();
      params.append('id', id);
        this.API.checkProjectOwnership(id).subscribe((data) =>
        {
          console.log("in subscribe if");
          if (data.type === 'AL') {
            this.storeProjectID(id);
            observer.next(true);
            observer.complete();
          }
          else {
            this.router.navigate(['/dashboard']);
            observer.next(false);
            observer.complete();
            return false;
          }
        });
    }
  });
}

Answer 2

@Injectable()
export class DrawingBoardGuard implements CanActivate {

  constructor( private _http: HttpClient, private _router : Router) {

  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      let url : string = 'someUrl';
      return new Observable<boolean>((observer:any) => {
        this._http.get(url)
          .map((result) => {
            if(!result.isPermitted){
              this.navigateToOtherPage(...);
              observer.next(false);
              observer.complete();
              return false;
            }else {
              observer.next(true);
              observer.complete();
              return true;
            }
          })
          .catch(err => {
            this.navigateToOtherPage(...);
            return Observable.of(false);
          });
      });

  }