When it comes to displaying side menu items based on the user's role, I run into an issue in app.html. Even though I check if the page's role matches the logged-in role, the menu items don't show up right after logging in. However, upon refreshing the app using the browser refresh button, the correct menu items appear as expected. This makes me think that Ionic might be caching the menu view. If that's the case, how can I refresh the app to display new menu items?
Each time I log in with a different user/role, the menu continues to display according to the previous user/role.
app.component.ts
constructor() {
this.initializeApp();
this.pages = [
{ title: 'Home', component: 'HomePage', icon: 'home', role: 5 },
{ title: 'Profile', component: 'ProfilePage', icon: 'person', role: 5 },
{ title: 'Account', component: 'AccountPage', icon: 'home', role: 5 },
{ title: 'Search Employee', component: 'AtlasemployeehomePage', icon: 'home', role: 4 }
];
}
app.html
<ion-list>
<div *ngFor="let p of pages">
<button menuClose ion-item *ngIf="p.role == role" (click)="openPage(p)">
<ion-icon name="{{p.icon}}" style="margin-right:10%"></ion-icon> {{p.title}}
</button>
</div>
<button menuClose ion-item (click)="presentLogout()">
<ion-icon name="log-out" style="margin-right:10%"></ion-icon> Logout
</button>
</ion-list>
I adjust the role variable based on the currently logged-in user.