Blazor - Refreshing nav menu on login

Question

I am in the closing stages of finishing my first Blazor WA app. However, I have a problem regarding my nav menu.

The nav menu (apart from the login button) is hidden until a login. The problem is once a user logs in the navbar doesn't update with the controls they are allowed to see based on their role.

I know to why this is as the nav menu have already been initialized based on the roles of nothing due to no JWT token, which at the point is correct. If I do a reload of the page (ctrl+f5) the menu populated correctly.

How can I update the state of the nav menu on login? any help would be really appreciated.

    <div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Net2 Support Portal</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<AuthorizeView>
    Everyone can view the normal menu
    @if (isAdmin || isDev || isSecondline || isAppEng || isUser)
    {
        <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
            <ul class="nav flex-column">
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Overview" Match="NavLinkMatch.All">
                        <i class=" oi material-icons"> home </i>Home
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Net2Users">
                        <span class="oi material-icons" aria-hidden="true">people</span>Users
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Net2Departments">
                        <span class="oi material-icons" aria-hidden="true">people</span>Departments
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="AccessLevels">
                        <span class=" oi material-icons" aria-hidden="true">shield</span>AccessLevels
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Timezones">
                        <span class="oi material-icons" aria-hidden="true">schedule</span>Timezones
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Tokens">
                        <span class="oi material-icons" aria-hidden="true">payment</span>Tokens
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Operators">
                        <span class="oi material-icons" aria-hidden="true">people</span>Operators
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Net2Versioning">
                        <span class="oi material-icons" aria-hidden="true">analytics</span>Versioning
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Database">
                        <span class="oi material-icons" aria-hidden="true">storage</span>Database
                    </NavLink>
                </li>

                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Devices">
                        <span class="oi material-icons" aria-hidden="true">devices</span>Devices
                    </NavLink>
                </li>
            </ul>
        </div>
    }

    @*Only Secondline, AppsEngineers, Admin and Devs can access this*@
    @if (isSecondline || isAppEng || isAdmin || isDev)
    {
        <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
            <ul class="nav flex-column">
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Diagnostics" Match="NavLinkMatch.All">
                        <span class="oi material-icons" aria-hidden="true">health_and_safety</span>Diagnostics
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Patches">
                        <span class="oi material-icons" aria-hidden="true">medical_services</span>Patches
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="ProFeatures">
                        <span class="oi material-icons" aria-hidden="true">featured_video</span>Pro Features
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Tools">
                        <span class="oi material-icons" aria-hidden="true">build</span>Tools
                    </NavLink>
                </li>
            </ul>
        </div>
    }

</AuthorizeView>

<AuthorizeView>
    <Authorized>
            <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
                <ul class="nav flex-column">
                    <li class="nav-item px-3">
                        @*Only Admin and Dev can access this*@ 
                        @if (isAdmin || isDev)
                        {
                            <NavLink class="nav-link" href="Admin">
                                <span class="oi material-icons" aria-hidden="true">admin_panel_settings</span> Admin Panel
                            </NavLink>
                        }
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="Logout">
                            <span class="oi material-icons" aria-hidden="true">logout</span> Logout
                        </NavLink>
                    </li>
                </ul>
            </div>

    </Authorized>
    <NotAuthorized>
        <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
            <ul class="nav flex-column">
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Login" Match="NavLinkMatch.All">
                        <span class="oi material-icons" aria-hidden="true">login</span> Login
                    </NavLink>
                </li>
            </ul>
        </div>
        
    </NotAuthorized>
</AuthorizeView>


   


@code {

    [CascadingParameter]
    public Task<AuthenticationState> AuthState { get; set; }
    private bool collapseNavMenu = true;
    public bool isAuthenticated { get; set; }

    public bool isAdmin { get; set; }
    public bool isUser { get; set; }
    public bool isDev { get; set; }
    public bool isSecondline { get; set; }
    public bool isAppEng { get; set; }
    public bool isTester { get; set; }


    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthState;
        if (authState.User.Identity.IsAuthenticated)
        {
            isAuthenticated = true;

            isUser = authState.User.IsInRole(UserRoles.User);
            isDev = authState.User.IsInRole(UserRoles.Developer);
            isSecondline = authState.User.IsInRole(UserRoles.Secondline);
            isAppEng = authState.User.IsInRole(UserRoles.ApplicationEngineer);
            isAdmin = authState.User.IsInRole(UserRoles.Administrator);
            isTester = authState.User.IsInRole(UserRoles.Tester);
            StateHasChanged();
        }
    }
}

Answer 1

Thanks everyone for there help. The solution was using <AuthorizeView Roles="@Roles.Administrator"> rather then the method I made. Thanks for everyone's time!