Question

我正在制作一个Angular 4网络应用。我需要保护我的路线，以便我使用stack ghci --with-ghc stack-run-ghc.sh --ghci-options src/main/Main.hs和AuthGuard检查用户是否可以访问某条路线。

CanActivate首先检查CanActivate是否在id，否则如果用户已获得授权，它会检查我的后端。如果我点击已在sessionStorage中已id的项目并且它进入sessionStorage它可以正常工作，但是如果它进入其他并调用我的API它会去到函数的末尾并在调用返回true之前返回false如果我删除checkIfIDInStorage中的return false它仍然无法正常工作。如果我在看到它已经返回true后再次点击该项目，它可以正常工作。

控制台输出

canActivate

Guard.ts

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

API.service.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);
}

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

  }

AuthGuard可以激活转到函数结束并返回false而不是等待订阅返回true

2 个答案: