How to hide custom state

Question

I have written a custom state and a custom AuthGuard. But I can't hide the menu item (custom state) in the navigation sidebar.

import {Injectable} from '@angular/core';
import { of as observableOf } from 'rxjs';
import { UserService} from "@eo-sdk/core";
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class QuotenImportAuthguard implements CanActivate {

constructor(private userService: UserService) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const roleIsOkay = this.userService.getCurrentUser().roles.some(role => ['Stab', 'IT-Admin', 'System-Admin-Role'].includes(role.name));
    return observableOf(roleIsOkay);
}
}

In custom-states.modules.ts I am using my QuotenImportAuthGuard

export const routes: Route[] = [
{path: QuotenImportComponent.path, component: QuotenImportComponent, canActivate: [QuotenImportAuthguard]}
];

export const links: EoLinkPlugin[] = [
QuotenImportComponent
];

The QuotenImportAuthGuard is working from a permission perspective but the menu item in the navigation sidebar is still visible, even though the user role is not allowed to use it. If he clicks the menu item - nothing happens because the user is not allowed to enter this route.

How can I hade the menu item?

Answer 1

Hi,

I have not tested it, but something you can try is changing the matchType according to your role query.

In the component where you have
static matchType = new RegExp('sidebar-navigation');
check if the correct roles are present (same way you do it in the Authguard) and then set matchType = null if they are not.
This will hide the menu item.

Cheers,

Kolja