Blazor中App.razor与页面异步执行顺序问题求助

你遇到的问题本质是异步初始化任务未完成时，子页面已完成渲染生命周期，导致无法获取全局状态的最新值。以下是几种实用的解决思路：

1. 初始化完成前阻塞路由渲染 #

在App.razor中先完成全局状态初始化，再渲染路由内容，避免子页面提前加载：

@inject IJSRuntime JSRuntime
@inject StateService StateService

@if (!isInitialized)
{
    <div>初始化中...</div>
}
else
{
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>找不到指定页面</p>
            </LayoutView>
        </NotFound>
    </Router>
}

@code {
    private bool isInitialized;

    protected override async Task OnInitializedAsync()
    {
        // 从localStorage读取token并设置全局状态
        var token = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "authToken");
        StateService.SetToken(token);
        
        isInitialized = true;
    }
}

这种方式会确保所有子页面只有在全局初始化完成后才开始渲染，彻底避免生命周期顺序问题。

2. 给全局状态类添加初始化完成信号 #

在全局状态类中暴露一个初始化完成的Task，让子页面等待该任务完成后再读取状态：

全局状态类代码 #

public class StateService
{
    public string Token { get; private set; }
    public Task InitializationCompleted { get; private set; } = Task.CompletedTask;

    public async Task Initialize(IJSRuntime jsRuntime)
    {
        Token = await jsRuntime.InvokeAsync<string>("localStorage.getItem", "authToken");
        InitializationCompleted = Task.CompletedTask;
    }
}

App.razor中调用初始化 #

@inject StateService StateService
@inject IJSRuntime JSRuntime

<Router AppAssembly="@typeof(App).Assembly">
    <!-- 路由内容 -->
</Router>

@code {
    protected override async Task OnInitializedAsync()
    {
        await StateService.Initialize(JSRuntime);
    }
}

Login页面中等待初始化完成 #

@inject StateService StateService

@code {
    protected override async Task OnInitializedAsync()
    {
        // 等待全局状态初始化完成
        await StateService.InitializationCompleted;
        
        // 此时可安全读取Token
        var token = StateService.Token;
        // 后续业务逻辑
    }
}

3. 在子页面中延迟读取状态 #

如果不想阻塞全局渲染，可以在Login页面的OnAfterRenderAsync中轮询或等待状态就绪：

@inject StateService StateService

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 等待Token被设置（最多等待3秒，避免无限等待）
            var waitCount = 0;
            while (string.IsNullOrEmpty(StateService.Token) && waitCount < 30)
            {
                await Task.Delay(100);
                waitCount++;
            }
            
            if (!string.IsNullOrEmpty(StateService.Token))
            {
                // 处理Token逻辑
            }
        }
    }
}

这种方式适合需要快速渲染页面，但又要等待异步初始化结果的场景。

内容的提问来源于stack exchange，提问作者Musaffar Patel