Razor页面中Blazor组件的AuthenticationState级联参数始终为空的解决方法

问题原因 #

在Blazor页面中，CascadingAuthenticationState（通常在App.razor中配置）会自动向下传递AuthenticationState级联参数，让子组件能获取登录用户信息。但Razor页面（.cshtml）不属于Blazor组件树，直接渲染Blazor组件时没有这个级联上下文，导致组件中的_authState始终为空。

解决方案 #

方案一：用CascadingAuthenticationState包裹Blazor组件 #

这是最简洁的方案，直接在Razor页面中为Blazor组件提供级联参数环境：

1. 在Index.cshtml顶部添加命名空间引用：

@using Microsoft.AspNetCore.Components.Authorization;

2. 修改组件渲染代码：

<div class="col-6">
    <component type="typeof(CascadingAuthenticationState)" render-mode="ServerPrerendered">
        <component type="typeof(Components.UserProfile)" render-mode="ServerPrerendered" />
    </component>
</div>

修改后UserProfile.razor无需改动，就能正常通过级联参数获取AuthenticationState。

方案二：手动传递AuthenticationState参数 #

如果需要更灵活的参数控制，可以从Razor页面主动获取认证状态后传给Blazor组件：

1. 修改Index.cshtml.cs，注入IAuthenticationStateProvider并获取认证状态：

private readonly UserManager<User> _userManager;
private readonly SignInManager<User> _signInManager;
private readonly IAuthenticationStateProvider _authStateProvider;

public IndexModel(
    UserManager<User> userManager,
    SignInManager<User> signInManager,
    IAuthenticationStateProvider authStateProvider)
{
    _userManager = userManager;
    _signInManager = signInManager;
    _authStateProvider = authStateProvider;
}

public Task<AuthenticationState> AuthState { get; set; }

public async Task<IActionResult> OnGetAsync()
{
    _user = await _userManager.GetUserAsync(User);
    if (_user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    AuthState = _authStateProvider.GetAuthenticationStateAsync();
    await LoadAsync(_user);
    return Page();
}

2. 在Index.cshtml中传递参数给Blazor组件：

<component type="typeof(Components.UserProfile)"
           render-mode="ServerPrerendered"
           param-_authState="@Model.AuthState" />

3. （可选）修改UserProfile.razor，同时支持级联参数和手动传入参数：

@code {
    [CascadingParameter]
    public Task<AuthenticationState>? _authState { get; set; }

    [Parameter]
    public Task<AuthenticationState>? AuthState { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        var targetAuthState = AuthState ?? _authState;
        if (targetAuthState is not null)
        {
            var authenticationState = await targetAuthState;
            // 处理用户信息逻辑
        }
    }
}

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