Blazor WASM托管应用首次加载时授权组件卡顿问题求助

1. 预配置OIDC元数据避免动态请求 #

Blazor WASM默认会动态请求Auth0的.well-known/openid-configuration元数据，这个请求可能是首次加载卡顿的核心原因。直接硬编码元数据地址，跳过动态获取步骤：

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Auth0", options.ProviderOptions);
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.AdditionalProviderParameters.Add(
         "audience",  builder.Configuration["Auth0:Audience"]);
    
    // 替换为你的Auth0域名
    options.ProviderOptions.Metadata = new OpenIdConnectMetadata
    {
        AuthorizationEndpoint = "https://你的Auth0域名/authorize",
        TokenEndpoint = "https://你的Auth0域名/oauth/token",
        UserInfoEndpoint = "https://你的Auth0域名/userinfo",
        Issuer = "https://你的Auth0域名/",
        JwksUri = "https://你的Auth0域名/.well-known/jwks.json"
    };
});

2. 自定义认证状态提供器优化初始化 #

默认的认证状态检查会阻塞UI，改用异步初始化逻辑，首次加载先返回匿名状态，后台完成token验证：

public class CustomAuthStateProvider : RevalidatingAuthenticationStateProvider
{
    private readonly ILocalStorageService _localStorage;
    private readonly HttpClient _httpClient;

    public CustomAuthStateProvider(ILocalStorageService localStorage, HttpClient httpClient, ILoggerFactory loggerFactory)
        : base(loggerFactory)
    {
        _localStorage = localStorage;
        _httpClient = httpClient;
    }

    protected override TimeSpan RevalidationInterval => TimeSpan.FromMinutes(30);

    protected override async Task<bool> ValidateAuthenticationStateAsync(
        AuthenticationState authenticationState, CancellationToken cancellationToken)
    {
        var token = await _localStorage.GetItemAsync<string>("access_token");
        if (string.IsNullOrEmpty(token)) return false;

        var handler = new JwtSecurityTokenHandler();
        if (handler.CanReadToken(token))
        {
            var jwtToken = handler.ReadJwtToken(token);
            return jwtToken.ValidTo > DateTime.UtcNow;
        }
        return false;
    }

    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var anonymous = new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        
        try
        {
            var token = await _localStorage.GetItemAsync<string>("access_token");
            if (!string.IsNullOrEmpty(token))
            {
                var isValid = await ValidateAuthenticationStateAsync(anonymous, CancellationToken.None);
                if (isValid)
                {
                    var claims = ParseClaimsFromJwt(token);
                    return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(claims, "jwt")));
                }
            }
        }
        catch { }

        return anonymous;
    }

    private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
    {
        var handler = new JwtSecurityTokenHandler();
        return handler.ReadJwtToken(jwt).Claims;
    }
}

然后在Program.cs注册自定义提供器：

builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();

3. 调整App.razor的授权流程 #

优化未授权逻辑，避免不必要的等待，直接跳转登录：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <div class="loading-spinner">加载中...</div>
                </Authorizing>
                <NotAuthorized>
                    @{
                        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
                        if (!authState.User.Identity?.IsAuthenticated ?? true)
                        {
                            NavigationManager.NavigateTo("/authentication/login");
                        }
                        else
                        {
                            <h1>抱歉</h1>
                            <p>你无权访问此页面</p>
                        }
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
        </Found>
        <NotFound>
            <PageTitle>未找到页面</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">抱歉，该地址不存在内容。</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

4. 其他优化点 #

• 检查服务器与Auth0的网络连通性，确保元数据、token请求无超时
• 启用HTTP/2或HTTP/3协议，降低网络延迟
• 托管型WASM可启用预渲染，让服务器提前处理初始页面渲染

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