Angular 如何结合本地函数 return 值与运行时回调 http 请求

Question

我有本地函数来检查 returns true/false 的某些验证。我还有运行时回调函数，它是一个异步函数，即。 http 调用。

注意：此 checkPermission 函数发生在 for 循环内。

我想检查这两个函数调用是否为真。谁能帮我实现这个目标？

private checkPermissions(
        moduleId: number,
        permissions: number[],
        callback?: () => Observable<boolean>
    ): boolean {
        if(callback) {
            console.log('callback function defined');
        }

//下面是局部函数。如何在这里进行回调（）？

        return this.userSecurityService.userHasLicenseAndPermission(
            moduleId,
            permissions
        );
    }

我的完整代码是：组件：

options: NavOption[] = [];
this.options = this.sideNavService.loadMenus();

Sidenav 服务：

loadMenus(): NavOption[] {
    return this.getMenus();
}

private getMenus(): NavOption[] {
    const filteredMenuItems: NavOption[] = [];
    let menus =  [{
        id: 'recorded-events',
        label: 'Recorded events',
        icon: 'far fa-calendar-check fa-2x',
        url: `/incident/${this.organisationId}/list`,
        permissions: [
            EventReportingPermissions.View,
            EventReportingPermissions.ViewOwnEvents,
            EventReportingPermissions.ViewEmployeesEvents
        ],
        additionalPermissionCheck: () =>
            this.eventAccessGroupService.hasEventAccessGroupException()//this is the service to make http call
    },
    {
        id: 'new-events',
        label: 'Report new event',
        icon: 'far fa-calendar-plus fa-2x',
        url: `/incident/${this.organisationId}/create`,
        permissions: [EventReportingPermissions.Report]
    }]
    
    for(let item of menus) {
    
        let canAccess = this.checkPermissions(
                            topLevelItem.module,
                            subItem.permissions
                        );
        filteredMenuItems.push(item);
    }   
    return filteredMenuItems;
}

//local function

private checkPermissions(moduleId: number, permissions: number[]): boolean {
        //following returns value from local function and no http call
        return this.userSecurityService.userHasLicenseAndPermission(
            moduleId,
            permissions
        );
}

//additionalPermissionCheck?: () => Observable<boolean>;

Answer 1

像这样：

sub = myHttpGetCall$().subscribe(value => {
        if (value && localValue) {
        // do whatever when both are true
        }
      }

其中 localValue 是来自本地函数的 return 值，我认为这不是异步操作。

Answer 2

使用 RxJs iif https://www.learnrxjs.io/learn-rxjs/operators/conditional/iif

booleanObservable$ = iif(() => yourLocalCondition, yourHttpRequest$, of(false));

如果您的 localCondition 为真，它将发出 http 请求，否则没有任何意义，因此它只会返回一个发出假的可观察对象。

Answer 3

我不确定我是否理解正确，但您的回调是执行权限检查的函数吗？

如果是这样，您可以使用 map 管道：

// Beware this returns Observable<boolean> and not boolean
const safeCallbackResult = callback ? callback() : of(true) // default to returning true as we'd like to check for the second condition
return callback().pipe(
  map(canDoAction => canDoAction ? this.userSecurityService.userHasLicenseAndPermission(...) : false)
)

如果您想 return 一个布尔值，您不能。因为当您需要 await 回调的可观察发射时，该操作可能需要一些时间。即使您可以使函数 async

private async checkPermissions(
  moduleId: number,  
  permissions: number[],
  callback?: () => Observable<boolean>
): Promise<boolean> {
  // callback().toPromise() if using RxJS 6
  // firstValueFrom(callback()) if using RxJS 7
  if(callback && ! (await callback().toPromise())) return false
  return this.userSecurityService.userHasLicenseAndPermission(...)
}

Angular 如何结合本地函数 return 值与运行时回调 http 请求

Angular how to combine local function return value with runtime call back http request

rxjs

angular11