Il componente Blazor non si aggiorna

Question

Quindi ho un'applicazione Blazor in cui un utente accede e il componente dell'intestazione cambia a seconda che l'utente abbia effettuato l'accesso o meno. Dopo aver effettuato l'accesso, vengono reindirizzati alla home page principale, ma il componente dell'intestazione non si aggiorna a meno che non si prema il pulsante di aggiornamento sul browser. Ho provato a usare StateHasChanged(). Ecco il mio codice pertinente nel componente dell'intestazione:

@using Newtonsoft.Json
@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager

@if (!string.IsNullOrWhiteSpace(FirstName))
{
    <div class="header-user-widget">
        <button class="btn btn-cart">
            Cart <span class="badge badge-cart">@CartCount</span>
        </button>
        <i class="fa fa-user-circle"></i> @FirstName @LastName
        <i class="fa fa-sign-out-alt header-sign-out" @onclick="SignOutClicked"></i>
    </div>
}

@code {
    private string FirstName { get; set; }
    private string LastName { get; set; }
    private int CartCount { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var page = NavManager.ToBaseRelativePath(NavManager.Uri).ToLower();
        var cookie = await JsRuntime.InvokeAsync<string>("Cookies.get", "Login");

        if (!page.StartsWith("login"))
        {
            if (string.IsNullOrWhiteSpace(cookie))
            {
                NavManager.NavigateTo("/Login");
                return;
            }
        }
        if (!string.IsNullOrWhiteSpace(cookie))
        {
            var decodedCookie = cookie.FromBase64String();

            FirstName = CookieHelper.GetValueFromKey(decodedCookie, "FirstName");
            LastName = CookieHelper.GetValueFromKey(decodedCookie, "LastName");
        }

        CartCount = await NumberOfItemsInCart();
    }
}

Ed ecco la mia pagina di accesso:

@page "/login"

@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager

<LoginBox OnLoginButtonClick="@LoginButtonClicked" />

@code {

    private async Task LoginButtonClicked(LoginBoxReturnModel model)
    {
        var cookieString = $"UserId={model.UserId}|FirstName={model.FirstName}|LastName={model.LastName}|Email={model.EmailAddress}|IsAdmin={model.IsAdmin}";
        var encyptedString = cookieString.ToEncryptedBase64String();

        await JsRuntime.InvokeVoidAsync("Cookies.set", "Login", encyptedString);

        StateHasChanged(); // This line doesn't seem to have any effect
        NavManager.NavigateTo("/");
    }
}

Una volta che l'utente accede, viene reindirizzato correttamente alla "/"pagina, ma l'intestazione non viene aggiornata. Se premo F5 nel browser per aggiornarlo, l'intestazione è corretta. Sento che quello che sta succedendo è che l'applicazione sta navigando prima che la StateHasChanged()linea abbia il tempo di aggiornarsi, quindi non si aggiorna mai. In tal caso, come dovrei implementarlo?

Answer 1

Rilascia StateHasChanged (), la navigazione da "/ login" a "/". Il true dovrebbe forzare il caricamento del cookie come sta facendo f5.

NavManager.NavigateTo("/",true);