Composant Blazor pas rafraîchissant

Question

J'ai donc une application Blazor dans laquelle un utilisateur se connecte et le composant d'en-tête change selon qu'un utilisateur est connecté ou non. Une fois que l'utilisation s'est connectée, ils sont redirigés vers la page d'accueil principale, mais le composant d'en-tête ne se met pas à jour à moins que je clique sur le bouton d'actualisation du navigateur. J'ai essayé d'utiliser StateHasChanged(). Voici mon code pertinent dans le composant d'en-tête:

@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();
    }
}

Et voici ma page de connexion:

@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("/");
    }
}

Une fois que l'utilisateur se connecte, il est correctement redirigé vers la "/"page, mais l'en-tête n'est pas mis à jour. Si j'appuie sur F5 dans le navigateur pour le rafraîchir, l'en-tête est correct. J'ai l'impression que ce qui se passe, c'est que l'application navigue avant que la StateHasChanged()ligne n'ait le temps de se rafraîchir, donc elle n'est jamais rafraîchissante. Si tel est le cas, comment dois-je l'implémenter?

Answer 1

Déposez le StateHasChanged (), votre navigation de "/ login" à "/". Le vrai devrait forcer le chargement du cookie comme le fait f5.

NavManager.NavigateTo("/",true);