Blazor Server(.NET Core7)登录页传用户名到Dashboard报错求助

问题原因 #

你遇到的InvalidOperationException是因为Blazor Server默认启用预渲染机制：在OnInitializedAsync生命周期阶段，组件还未完成与浏览器的JS运行时连接，此时无法执行JS互操作（包括ProtectedSessionStorage的读写）。

解决方案 #

方案1：调整到正确的生命周期方法 #

将读取SessionStorage的逻辑移至OnAfterRenderAsync，这个阶段组件已渲染到浏览器，JS运行时可用。同时添加判断确保只执行一次：

修改Dashboard.razor代码：

@inject ProtectedSessionStorage sessionStorage

<div>Welcome @UserFullName</div>

@code{
    public string? UserFullName { get; set; }
    private bool _hasLoadedUser = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 仅在第一次渲染时执行读取操作
        if (firstRender && !_hasLoadedUser)
        {
            await GetUserName();
            _hasLoadedUser = true;
            StateHasChanged(); // 触发UI更新，显示读取到的用户名
        }
    }

    private async Task GetUserName()
    {
        var result = await sessionStorage.GetAsync<string>("NewUserName");
        if (result.Success)
        {
            UserFullName = result.Value;
        }
    }
}

方案2：关闭预渲染（不推荐） #

如果不需要预渲染，可在Program.cs中禁用：

builder.Services.AddServerSideBlazor(options =>
{
    // 禁用预渲染
    options.DisablePrerendering = true;
});

注意：预渲染能提升首屏加载速度和SEO，除非必要不建议关闭。

方案3：使用服务器端状态管理（推荐） #

Blazor Server是服务器端运行的应用，跨组件/页面传递状态更适合用服务器端状态，避免依赖客户端存储的问题。

1. 创建Scoped状态服务：

public class UserSessionState
{
    public string? CurrentUserName { get; set; }
}

2. 在Program.cs注册服务：

builder.Services.AddScoped<UserSessionState>();

3. 登录页设置状态：

[Inject]
public UserSessionState UserSession { get; set; }

private async Task SetUserName(string userName)
{
    UserSession.CurrentUserName = userName;
    NavigationManager.NavigateTo("/Dashboard", true);
}

4. Dashboard页直接使用：

@inject UserSessionState UserSession

<div>Welcome @UserSession.CurrentUserName</div>

这种方式无需JS互操作，状态在服务器端用户会话中保持，更稳定可靠。

内容的提问来源于stack exchange，提问作者ahmed abdelaziz