The issue of having multiple roles on the client side in my Blazor WebAssembly project

<AuthorizeView Roles="@RulesAndRoles.Rules.FirstOrDefault(xd=> xd.Id ==1).Roles.ToString()"><IconNavLink Href="Management" Icon="fa-star">@localizer["Management"]</IconNavLink></AuthorizeView><AuthorizeView Roles="@RulesAndRoles.Rules.FirstOrDefault(xd=> xd.Id == 2).Roles.ToString()"><IconNavLink Href="Entity" Icon="fa-star">@localizer["Entity"]</IconNavLink></AuthorizeView>

The role claims of my JWT token are structured as follows.

"http://schemas.microsoft.com/ws/2008/06/identity/claims/role": ["Administrator","User"],

I am fetching and populating the necessary roles from my static class RulesAndRoles that I pull from the database, and there is no issue with the system. However, things have changed, and now each user can have multiple roles.

In the above code, @RulesAndRoles.Rules.FirstOrDefault(xd => xd.Id == 1).Roles.ToString() returns a value like "Administrator,Manager". If a user has only "Administrator" or only "Manager" as their role, everything works fine, but if they have both roles at the same time, no AuthorizeView works properly.

How can I solve this issue?

Thank you in advance!

<AuthorizeView Roles="Administrator"><Authorized><p>test admin</p></Authorized><NotAuthorized><AuthorizeView Roles="User"><Authorized><p>test user</p></Authorized><NotAuthorized><p>xd</p></NotAuthorized></AuthorizeView></NotAuthorized></AuthorizeView>

I tried this, it works, but it's not very clean. In more complex areas, it makes things even more complicated.