Angular 如何使用 HTTP Get 调用实现 CanActivate 保护

Question

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

逻辑如下

获取摘要。如果summary items length大于1，则迭代验证其激活状态。如果激活状态不是 Active 并且没有摘要项目 returned 然后将用户导航到登录页面

我有以下服务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。我已尝试实现如下授权逻辑，但不确定如何 return 可观察。

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

您没有 return 可观察对象。

canActivate(): Observable<boolean> 期望 Observable 的 return 值（其他选项是可能的 - 但在您的示例中 Observable 是好的）。

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

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

您需要做的是 return 如下所示的可观察对象。添加 pipe( map() ) 将保持 is 作为一个 Observable，但是 'map' 内容是一个布尔值（在你的情况下），所以你将 returning Observable<boolean>

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

Angular 如何使用 HTTP Get 调用实现 CanActivate 保护

Angular How to implement CanActivate guard with HTTP Get call

routes

canactivate

angular

angular-router-guards