As for removing menu items based on role / responsibility after authorizing a user I have a solution that I think will help. I have been using this code for a while and it's probably not the most elegant but it works. Below is my menu.component.ts file. I'd recommend using the visible parameter from the MenuModelAPI.
Code: Select all
@Input() reset: boolean;
model: any[];
scrapVisible: boolean;
soaVisible: boolean;
sftVisible: boolean;
constructor(public app: AppComponent, public auth: AuthService) {}
ngOnInit() {
if (this.auth.authenticated()) {
if (this.auth.userProfile.app_metadata.group === 'scrap'){
this.scrapVisible = true;
this.soaVisible = false;
this.sftVisible = false;
}
if (this.auth.userProfile.app_metadata.group === 'soa'){
this.scrapVisible = true;
this.soaVisible = true;
this.sftVisible = true;
}
}
this.model = [
{label: 'Home', icon: 'home', routerLink: ['/home']},
{
label: 'SOA Team', icon: 'code', visible: this.soaVisible,
items: [
{label: 'Schedule', icon: 'date_range', routerLink: ['/schedule']},
{label: 'Environments', icon: 'assignment', routerLink: ['/environments']},
{
label: 'Documents', icon: 'code', visible: this.soaVisible,
items: [
{label: 'Purchase Order', icon: 'work', routerLink: ['/purchaseorder']},
{label: 'PO Receipt', icon: 'local_shipping', routerLink: ['/poreceipt']},
{label: 'AP Invoice', icon: 'mail', routerLink: ['/apinvoice']}
]
},
]
},
{
label: 'MFT', icon: 'business', visible: this.soaVisible,
items: [
{label: 'MFT Home', icon: 'home', routerLink: ['/mft']}
]
},
{
label: 'SFT', icon: 'business', visible: this.sftVisible,
items: [
{label: 'SFT Home', icon: 'home', routerLink: ['/sfthome']}
]
},
{label: 'All Documents', icon: 'view_list',visible: this.scrapVisible, routerLink: ['/alldocs']},
{label: 'Purchase Orders', icon: 'work', visible: this.scrapVisible, routerLink: ['/purchaseorders']},
{label: 'Shipments', icon: 'local_shipping', visible: this.scrapVisible, routerLink: ['/shipments']},
{label: 'AP Invoices', icon: 'mail',visible: this.scrapVisible, routerLink: ['/apinvoices']},
{label: 'Acknowledgements', icon: 'thumb_up', visible: this.scrapVisible, routerLink: ['/acknowledgements']},
{
label: 'POsandASN', icon: 'account_balance', visible: this.scrapVisible,
items: [
{label: 'PO', routerLink: ['/po']},
{label: 'ASN', routerLink: ['/asn']}
]
},
{
label: 'Mappings', icon: 'map', visible: this.scrapVisible,
items: [
{label: 'Consumers', routerLink: ['/consumers']},
{label: 'Freight Vendors', routerLink: ['/freightvendors']},
{label: 'Items', routerLink: ['/items']},
{label: 'Ship Froms', routerLink: ['/shipfroms']},
{label: 'Ship Tos', routerLink: ['/shiptos']},
{label: 'Suppliers', routerLink: ['/suppliers']}
]
},
{
label: 'Settings', icon: 'settings_application',
items: [
{
label: 'Customization', icon: 'settings_application',
items: [
{label: 'Compact Size', icon: 'fiber_manual_record', command: () => this.app.layoutCompact = true},
{label: 'Material Size', icon: 'fiber_smart_record', command: () => this.app.layoutCompact = false},
{label: 'Light Menu', icon: 'label_outline', command: () => this.app.darkMenu = false},
{label: 'Dark Menu', icon: 'label', command: () => this.app.darkMenu = true},
]
}