AuthorizeView with SessionStorageService error JavaScript interop calls cannot be issued at this time

Chiến Đặng 0

hi,

currently i am getting this error: JavaScript interop calls cannot be issued at this time when get token from SessionStorageService (AuthorizeView ) in blazor sever net8, how can i fix?

when i leave it this : <component type="typeof(App)" render-mode="ServerPrerendered" />

in host.cshml then it ok, but UI nothing.

Can you help me?

@inherits LayoutComponentBase

@inject IJSRuntime JsRuntime

@using BlazorApp.Pages.Authentication

@inject AuthenticationStateProvider AuthenticationStateProvider

@inject IHttpContextAccessor HttpContextAccessor

@inject Blazored.SessionStorage.ISessionStorageService sessionStorage

<Authorized>

    <div class="bg-[#f9fbfd] dark:bg-dark text-black">

        <div class="bg-[url('assets/images/bg-main.png')] bg-black min-h-[220px] sm:min-h-[250px] bg-bottom fixed hidden w-full -z-50 detached-img"></div>

        <div x-cloak class="fixed inset-0 bg-black/60 dark:bg-dark/90 z-[999] lg:hidden" :class="{'hidden' : !$store.app.sidebar}" @click="ToggleSidebar">

        </div>

        <div class="flex mx-auto main-container">

            <Sidebar></Sidebar>

            <div class="flex-1 main-content">

                <Topbar></Topbar>

                <div class="h-[calc(100vh-60px)]  relative overflow-y-auto overflow-x-hidden p-4 space-y-4 detached-content">

                    @Body

                    <Footer></Footer>

                </div>

            </div>

        </div>

    </div>

</Authorized>

<NotAuthorized>

    <RedirectToLogin />

</NotAuthorized>

</AuthorizeView>

@if (direction == "ltr")

{

    <span>LTR</span>

}

else

{

    <span>RTL</span>

}

</button>

Chiến Đặng 0

protected override async Task OnAfterRenderAsync(bool firstRender)

{

Console.WriteLine("OnAfterRenderAsync called");

if (firstRender)

{

    Console.WriteLine("First render");

    try

    {

        sessionValue = await JSRuntime.InvokeAsync<string>("sessionStorage.getItem", "yourSessionKey");

        StateHasChanged(); // Cập nhật lại giao diện sau khi lấy giá trị từ session

    }

    catch (Exception ex)

    {

        Console.WriteLine($"Error: {ex.Message}");

    }

}

} ,OnAfterRenderAsync not working

JasonPan - MSFT 5,796 Microsoft Vendor

Hi @Chiến Đặng,

Could you kindly check the test code without AuthorizeView like below?

@page "/session-storage-test"
@inject IJSRuntime JsRuntime
@inject Blazored.SessionStorage.ISessionStorageService sessionStorage
<h3>Session Storage Test</h3>
<div>
    <button @onclick="SetSessionStorage">Set SessionStorage Item</button>
    <button @onclick="GetSessionStorage">Get SessionStorage Item</button>
</div>
<p>SessionStorage Value: @sessionValue</p>
@code {
    private string sessionValue;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender) 
        {
            try
            {
                Console.WriteLine("OnAfterRenderAsync - first render");
                
                sessionValue = await JsRuntime.InvokeAsync<string>("sessionStorageInterop.getItem", "testKey");
                Console.WriteLine($"Retrieved value from sessionStorage: {sessionValue}");
                StateHasChanged(); 
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error: {ex.Message}");
            }
        }
    }
    private async Task SetSessionStorage()
    {
        await JsRuntime.InvokeVoidAsync("sessionStorageInterop.setItem", "testKey", "Hello, Blazor!");
        Console.WriteLine("Session storage value set");
    }
    private async Task GetSessionStorage()
    {
        try
        {
            sessionValue = await JsRuntime.InvokeAsync<string>("sessionStorageInterop.getItem", "testKey");
            Console.WriteLine($"Session storage value retrieved: {sessionValue}");
            StateHasChanged(); 
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error: {ex.Message}");
        }
    }
}

Best Regards

Jason

Share via

AuthorizeView with SessionStorageService error JavaScript interop calls cannot be issued at this time

Your answer