Blazor WASM中LocalStorage跨页面竞态及登出事件未触发问题

问题1：LocalStorage写入延迟，子页面读取为空 #

原因 #

登录成功后OnLogInSucceeded中的异步存储操作未完成，页面已跳转子页面，导致子页面OnInitializedAsync执行时LocalStorage还未写入完成。

解决方案 #

方案1：等待认证状态就绪后再读取

修改子页面的OnInitializedAsync，先确保用户认证状态加载完成，再读取LocalStorage：

protected override async Task OnInitializedAsync()
{
    try
    {
        // 先等待认证状态初始化完成
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        if (authState.User.Identity.IsAuthenticated)
        {
            var savedUserDataString = await this.localStorage.GetItemAsync<string>(KeyUserData);
            this.loggedInAccount = JsonHelper.DeserializeString<LoggedInAccount>(savedUserDataString);
        }

        await base.OnInitializedAsync();
    }
    catch (Exception ex)
    {
        logger.Error(ex, ex.Message);
    }
    finally
    {
        StateHasChanged();
    }
}

方案2：直接从Claims获取用户信息（更可靠）

跳过LocalStorage，直接从认证状态的Claims中提取用户信息，避免存储延迟：

protected override async Task OnInitializedAsync()
{
    try
    {
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;
        
        if (user.Identity.IsAuthenticated)
        {
            // 直接从Claims解析，无需依赖LocalStorage
            this.loggedInAccount = UserData.GetClaimsValue(user);
        }

        await base.OnInitializedAsync();
    }
    catch (Exception ex)
    {
        logger.Error(ex, ex.Message);
    }
    finally
    {
        StateHasChanged();
    }
}

问题2：OnLogOutSucceeded事件未触发，LocalStorage未清空 #

原因 #

当使用IdentityServer的外部登出流程时，页面会被重定向到IdentityServer的登出页面，Blazor组件的OnLogOutSucceeded事件会因组件生命周期中断而无法触发。

解决方案 #

方案1：全局监听认证状态变化

在App.razor中监听用户认证状态，当用户变为未认证时自动清空LocalStorage：

@inject AuthenticationStateProvider AuthenticationStateProvider
@inject ILocalStorageService localStorage
@implements IDisposable

@code {
    private IDisposable _authSubscription;

    protected override async Task OnInitializedAsync()
    {
        _authSubscription = AuthenticationStateProvider.AuthenticationStateChanged += async authState =>
        {
            if (!authState.User.Identity.IsAuthenticated)
            {
                await localStorage.ClearAsync();
            }
        };
    }

    public void Dispose()
    {
        _authSubscription?.Dispose();
    }
}

方案2：配置OIDC登出回调

在Program.cs中配置OIDC的登出回调事件，确保登出后执行清空操作：

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Local", options.ProviderOptions);
    options.ProviderOptions.PostLogoutRedirectUri = "/";

    // 登出回调时清空本地存储
    options.Events.OnLogoutCallback += async context =>
    {
        var localStorage = context.HttpContext.RequestServices.GetRequiredService<ILocalStorageService>();
        await localStorage.ClearAsync();
        return Task.CompletedTask;
    };
});

内容的提问来源于stack exchange，提问作者Ed L 005