Tukukkk

I am using ngx-permissions to handle the permissions in my Angular 6 application. I would like to check the permissions of the user before retrieving data from an endpoint. Ngx-permissions provides a way to check the user's permission in the method hasPermission(permissionName). This returns a promise. I would like to retrieve the data from the endpoint using an Observable as I have read this is the Angular way to do things. However I'm not sure how to combine the Promise from the permission check and the Observable method.

Service:

getData(): Observable<Item<>>{

  this.permissionsService.hasPermission(Permission.CanViewData)

  .then(hasPermission => {

    if (hasPermission) {

      return this.http.get<Item>('http://endpoint/getdata', httpOptions).pipe(

        map(this.extractData), // this is calculated too late

        catchError(e => this.handleError(e, 'GetData', new Observable<Item>()))

      );

    }

  });

  return new Observable<Item>(); // this is always passed to the component

}

Component:

getData(): void {

  this.service.getData().subscribe(data => {

    this.data = data

  });

}

I realise I'm not calling the hasPermission method correctly as my code always falls through to the final return new Observable<Item>();. However the data is being retrieved from my endpoint - if I add a console.log I can see the result of map(this.extractData). It just is calculated too late. The component has already moved on and is using the empty Item.

How can I use the permissionsService.hasPermission from ngx-permissions to check the permission of the user before attempting to retrieve the data and still return an Observable to my component?

Yes, and for the record it is more general rxjs question. Anyway you have to convert the promise to observable and then chain the invocation like this:

import { of, from, Observable } from 'rxjs'; 

import { map, filter, flatMap } from 'rxjs/operators';



class Caller {



  public constructor(){}



  public call() : Observable<Item> {

    //the promise returned from your method it has to be typed with boolean

    var permission = new Promise<boolean>(function(resolve, reject) {

      setTimeout(function() {

        resolve(true);

      }, 300);

    });





    //calling from(prommisse) converts promes to observable.

    return from(permission)

    .pipe(

      filter(t => t), //just a trick to avoid if statemt in the flatMap call

      flatMap( t => {

        //call your http get method here

        var it:Item = {property: "1"};

        return of<Item>([it])

      }))



  }

}



export class Item {

  property: String

}