Angular 如何通过 HTTP Get 调用实现 CanActivate 防护

Question

对于我的 Angular 6 项目，我们想使用 CanActivate 防护来检查授权。 为了实现这一点，我需要从 app.service 调用 getSummary() http get 调用，并从其响应中执行一些逻辑以提供授权。

逻辑如下

获取摘要。如果摘要项长度大于 1，则迭代并验证其激活状态。 如果激活状态不是活动并且没有返回摘要项，则将用户导航到登录页面

我有下面的服务 app.service.ts

@Injectable({
  providedIn: 'root'
})
export class ApiService {
 
 getSummary(url) {
    return this.http.get(url).pipe(
      retry(this.retryAttempts),
      map(data => {
        return data;
      }),
      catchError(err => {
        return this.handleError(err, url);
      })
    );
  } 
}

我有下面的 Auth Guard auth.guard.ts。我尝试实现如下所示的授权逻辑，但不确定如何返回 Observable。

export class AuthGuard implements CanActivate {
 
canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean>
{
    return this.checkAuthorization();
}

checkAuthorization():Observable<boolean>{

   let hasActiveSummary:boolean=false;
   this.apiService.getSummary(url)
      .subscribe( (data:any) => {

       console.log("Summary list:", data);
        if(data.length > 0){
          for (let i=0; i< data.length; i++) {
            if(data[i].activationStatus ==='ACTIVE') {
              hasActiveSummary=true;
              break;
            }
          }
        }
        console.log("STATUS",hasActiveSummary);
        if(!hasActiveSummary){
          this.router.navigate(['/login']);
        }
      },error => {
          console.log("Auth Guard error!", error);
        }
      );
} }

我对路由守卫很陌生。谁能指导如何以正确的方式实现这个场景？

Answer 1

您没有返回可观察的结果。

canActivate(): Observable
期望一个 Observable 的返回值（其他选项也是可能的 - 但在你的示例中 Observable 就可以了）。

const a = this.apiService.getSummary(url) 'a' 是一个 Observable

const b = this.apiService.getSummary(url).subscribe() 'b' 是订阅，而不是可观察的。

您需要做的是返回可观察值，如下所示。添加 pipe( map() ) 将保留 is 作为 Observable，但将内容“映射”为布尔值（在您的情况下），因此您将返回 Observable;

return this.apiService.getSummary(url)
      .pipe( 
          map(data:any) => {
             return true; // or false depending on your logic
          })
       )