Angular canActivate Guard with API

Question

我目前正在开发一个 Angular 网页，在后端使用 python API。 我想添加一个 canActivate Guard，以确保用户位于 Adminlist 中，位于另一台服务器上。

我的问题是，警卫似乎不等待 API 的响应，我在警卫本身中使用 window.alert 对其进行了测试，它向我显示了“未定义”作为输出。 当我在我的 auth.service 中测试我的方法时，我在我的 console.log 中得到了正确的响应，所以我的方法似乎返回了正确的布尔值，但我的守卫似乎没有等待 API 的答案。

我得到以下代码：

auth.service.ts：

import { HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { IAuth } from './IAuth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

   constructor(private http: HttpClient) { }

Acc: boolean;
getauth(): Observable<IAuth['Access']> {
return this.http.get<IAuth['Access']>('http://x.x.x.x:5555/auth');
}

get Access(): boolean {
   this.getauth().subscribe( data =>
   this.Acc = data);
return this.Acc;
}

}

这是我的 auth.guard.ts：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { AuthService} from './auth.service';

@Injectable({
  providedIn: 'root'

})
export class AuthGuard implements CanActivate {
   constructor (
      private auth: AuthService,
      private router: Router
  ) {}
    canActivate(
       next: ActivatedRouteSnapshot,
       state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
          if (!this.auth.Access) {
             this.router.navigate(['/noaccess']);
             window.alert(this.auth.Access);
             window.alert(this.auth.Acc);
           }
          return true;
  }
}

我希望你们能帮我解决这个问题，就像我说的，我在警卫（未定义）中得到错误的响应，访问属性和访问方法。

Answer 1

get Access(): boolean {
   this.getauth().subscribe( data => this.Acc = data);
   return this.Acc;
}

您不会等待 HTTP 调用完成，因此您的守卫也不会等待。 改用这个。

get Access(): Observable<any> {
   return this.getauth().pipe(tap(data => this.Acc = data));
}

你守卫然后变成

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.auth.Access.pipe(map(res => {
      if (!res) { this.router.navigate(['/noaccess']); }
      return !!res;
    }));
  }