Different Navigation menu for Different role

[tuhin24]

I am currently working on implementing distinct navigation menu items for TenantUser and TenantAdmin roles. My code change works when retrieving information from local storage without displaying the tenant and login dialog. The issue arises when the Cognito.guard.ts is activated upon entering the tenant name and pressing the Submit button.

At this point, the user is not authenticated, leading to a failure in the Auth.currentSession() call within the catch block. Consequently, the code triggers the login dialog. The challenge lies in the fact that the NavComponent is invoked even before the user is authenticated.

A potential solution would be to modify the logic so that the Cognito.guard.ts canActivate returns true only after the user is authenticated through the login dialog. Any advice on how I can accomplish this?

if (state.url === '/dashboard') {
// if we're going to the dashboard and we're not logged in,
// don't stop the flow as the amplify-authenticator will
// route requests going to the dashboard to the sign-in page.
return true;
}

[tuhin24]

Any suggestions?

[ujwalbukka]

Hi @tuhin24 - Sorry for delayed response.
If you want to display navigation menu items based on user roles. After the user is authenticated from the id token you can get their user role, similar to what has been implemented in nav.component.ts, then based on that role can manipulate UI components.

[tuhin24]

Thanks. It worked!