Angular 6 - Implement CanActivate Guard with http get call-CodePudding

For my Angular 6 project, we want to use CanActivate guard to check authorization. To implement this, I need to call getSummary() http get call from app.service and perform some logic from its response to provide authorization.

The Logic goes as follows

Get the summary. If summary items length is more than one, iterate and verify its activation status. If activation status is not Active and no summary items are returned then navigate the user to the login page

I have below service 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);
      })
    );
  } 
}

I have below Auth Guard auth.guard.ts.I have tried to implement authorization logic like below but am not sure how to return 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);
        }
      );
} }

I am very new to routing guards. Can anyone guide how to implement this scenario in a correct way?

CodePudding user response：

You are not returning the observable. Do something similar to the below instead of calling subscribe.

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