Change nav item visibility in Blazor Menu

Programming
, , ,
1

I’m using Blazor with .NET Core 3.0 to show a login in my menu. When the user is not logged in, the login nav item should be visible. When he is logged in, the login nav item should be hidden.

The following code is not working for refreshing the menu after logging in:

<div>
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        @if (!_isLoggedIn)
        {
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="login">
                    <span class="oi oi-person" aria-hidden="true"></span> <LocalizedString Key="NavMenuLogin" />
                </NavLink>
            </li>
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="licenseedit">
                    <span class="oi oi-spreadsheet" aria-hidden="true"></span> <LocalizedString Key="NavMenuRegistration" />
                </NavLink>
            </li>
        }
    </ul>
</div>

@code{

    private bool _isLoggedIn;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await TokenExistAsync();
    }

    private async Task TokenExistAsync()
    {
        var retVal = await Http.GetStringAsync("api/Login/ExistToken");
        _isLoggedIn = retVal == "yes";
    }

}

I’m having issues refreshing the menu after logging in. The code that I have is not working. How can I solve this?

2

One way to solve the issue is to add a StateHasChanged method call after updating the _isLoggedIn variable in the TokenExistAsync method:

private async Task TokenExistAsync()
{
    var retVal = await Http.GetStringAsync("api/Login/ExistToken");
    _isLoggedIn = retVal == "yes";
    StateHasChanged();
}

This will notify the component to refresh and update the _isLoggedIn variable in the UI.