How to get user roles in custom service

[Mohan_Pathapataa (Mohan Pathapata)]

Detailed explanation of the problem:

I have created a custom tab service to hide smart rules and sub assets based on the user roles as below. For validating the roles I am using Permissions service by using this service I am able to show and hide the respective tabs.

while doing logout i.e. when I click the logout button to logout, I am getting an error as Roles can be requested if the user is logged in

I tried get the current user state by using AppStateService but while combine the observables I have been getting compile time error. How to get the roles only when user is logged in ?

import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { OptionsService, Tab, TabsService, Permissions } from '@c8y/ngx-components';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const SUBASSETS_TAB_LABEL = 'Subassets';
const SMART_RULES_TAB_LABEL = 'Smart rules';

@Injectable({
    providedIn: 'root'
})
export class CustomTabBarService extends TabsService {
    items$: Observable<Tab[]>;
    constructor(rootInjector: Injector, router: Router, translateService: TranslateService,options: OptionsService, permissions: Permissions) {
        super(rootInjector, router, translateService, options);
        this.items$ = this.items$.pipe(map((tabs: Tab[]) => {
            const url = router.url;
            if (url.includes('group')) {
                if (permissions.hasRole('ROLE_APPLICATION_MANAGEMENT_ADMIN')) {
                    return tabs;
                }
                return tabs = tabs.filter(tab => tab.label !== SUBASSETS_TAB_LABEL && tab.label !== SMART_RULES_TAB_LABEL);
            }
            return tabs;
        }));
    }
}

Error messages / full error message screenshot / log file:

Question related to a free trial, or to a production (customer) instance?

Cumulocity Production

Regards
Mohan

[Tristan_Bastian]

Hi Mohan,

something like this should e.g. work:

import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import {
  OptionsService,
  Tab,
  TabsService,
  Permissions,
  AppStateService
} from '@c8y/ngx-components';
import { TranslateService } from '@ngx-translate/core';
import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

const SUBASSETS_TAB_LABEL = 'Subassets';
const SMART_RULES_TAB_LABEL = 'Smart rules';

@Injectable({
  providedIn: 'root'
})
export class CustomTabBarService extends TabsService {
  items$: Observable<Tab[]>;
  constructor(
    rootInjector: Injector,
    router: Router,
    translateService: TranslateService,
    options: OptionsService,
    permissions: Permissions,
    appState: AppStateService
  ) {
    super(rootInjector, router, translateService, options);
    this.items$ = combineLatest([appState.currentUser, this.items$]).pipe(
      map(([currentUser, tabs]) => {
        if (!currentUser) {
          return [];
        }
        const url = router.url;
        if (url.includes('group')) {
          if (permissions.hasRole('ROLE_APPLICATION_MANAGEMENT_ADMIN')) {
            return tabs;
          }
          return (tabs = tabs.filter(
            tab => tab.label !== SUBASSETS_TAB_LABEL && tab.label !== SMART_RULES_TAB_LABEL
          ));
        }
        return tabs;
      })
    );
  }
}

Regards,
Tristan