如何强制Blazor登录组件执行完整回发？排查应用状态重渲染

一、强制登录页执行完整回发以获取HttpContext #

方法1：使用传统HTML表单提交 #

绕过Blazor的交互式渲染，用传统表单提交到后端端点处理登录并设置Auth Cookie：

1. 创建Login.cshtml Razor Page，在OnPostAsync中处理登录逻辑：

public async Task<IActionResult> OnPostAsync(string email, string password, string returnUrl = "/")
{
    // 调用第三方API验证用户
    var loginResponse = await _apiClient.ValidateCredentials(email, password);
    if (loginResponse.IsSuccess)
    {
        var claims = new List<Claim>()
        {
            new Claim(ClaimTypes.Email, email),
            new Claim(WebAppConstants.CLAIM_API_TOKEN, loginResponse.AccessToken.Value),
            new Claim(WebAppConstants.CLAIM_USER_ID, loginResponse.UserId)
        };
        var identity = new ClaimsIdentity(claims, IdentityConstants.ApplicationScheme);

        await HttpContext.SignInAsync(IdentityConstants.ApplicationScheme,
            new ClaimsPrincipal(identity),
            new AuthenticationProperties()
            {
                IsPersistent = true,
                RedirectUri = returnUrl
            });

        return LocalRedirect(returnUrl);
    }
    ModelState.AddModelError(string.Empty, "登录失败，请检查账号密码");
    return Page();
}

2. 修改Login.razor为传统表单：

<form method="post" asp-page="/Login" asp-route-returnUrl="@ReturnUrl">
    <div>
        <label>邮箱:</label>
        <input type="email" name="email" required />
    </div>
    <div>
        <label>密码:</label>
        <input type="password" name="password" required />
    </div>
    <button type="submit">登录</button>
</form>

方法2：在Blazor中触发完整页面加载 #

如果想保留Blazor组件的交互，可通过NavigationManager强制完整回发，跳转到后端端点完成SignIn：

[Inject]
private NavigationManager NavigationManager { get; set; } = default!;
[Inject]
private IHttpContextAccessor HttpContextAccessor { get; set; } = default!;

public async Task LoginUser()
{
    // 调用第三方API验证用户，获取loginResponse
    var claims = new List<Claim>()
    {
        new Claim(ClaimTypes.Email, Model.Email),
        new Claim(WebAppConstants.CLAIM_API_TOKEN, loginResponse.AccessToken.Value),
        new Claim(WebAppConstants.CLAIM_USER_ID, loginResponse.UserId)
    };

    // 将登录信息临时存入Session
    var httpContext = HttpContextAccessor.HttpContext;
    httpContext.Session.SetString("LoginClaims", JsonSerializer.Serialize(claims));
    httpContext.Session.SetString("ReturnUrl", ReturnUrl ?? "/");

    // 强制完整页面加载到登录处理端点
    NavigationManager.NavigateTo("/login-handler", forceLoad: true);
}

创建LoginHandler.cshtml Razor Page处理SignIn：

public async Task<IActionResult> OnGetAsync()
{
    var claimsJson = HttpContext.Session.GetString("LoginClaims");
    var returnUrl = HttpContext.Session.GetString("ReturnUrl") ?? "/";
    
    if (!string.IsNullOrEmpty(claimsJson))
    {
        var claims = JsonSerializer.Deserialize<List<Claim>>(claimsJson);
        var identity = new ClaimsIdentity(claims, IdentityConstants.ApplicationScheme);
        
        await HttpContext.SignInAsync(IdentityConstants.ApplicationScheme,
            new ClaimsPrincipal(identity),
            new AuthenticationProperties()
            {
                IsPersistent = true,
                RedirectUri = returnUrl
            });
        
        HttpContext.Session.Remove("LoginClaims");
        HttpContext.Session.Remove("ReturnUrl");
        
        return LocalRedirect(returnUrl);
    }
    
    return RedirectToPage("/Login");
}

二、优化应用状态处理，无需完全禁用服务器预渲染 #

你禁用预渲染的核心原因是避免CascadingAppState重复调用API，可通过以下方式优化：

1. 检查状态是否已初始化，避免重复调用 #

在CascadingAppState的OnInitializedAsync中添加判断，仅在状态未加载时调用API：

private bool _isStateLoaded = false;

protected override async Task OnInitializedAsync()
{
    if (!_isStateLoaded)
    {
        var userInfo = await _apiClient.GetCurrentUserInfo();
        _currentUser = userInfo;
        _isStateLoaded = true;
    }
}

2. 从认证状态直接提取用户信息 #

如果用户已登录，可通过AuthenticationStateProvider从Claims中获取信息，无需调用API：

[Inject]
private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;

protected override async Task OnInitializedAsync()
{
    var authState = await AuthStateProvider.GetAuthenticationStateAsync();
    var user = authState.User;
    
    if (user.Identity.IsAuthenticated)
    {
        _currentUser = new UserInfo
        {
            Email = user.FindFirst(ClaimTypes.Email)?.Value,
            UserId = user.FindFirst(WebAppConstants.CLAIM_USER_ID)?.Value,
            ApiToken = user.FindFirst(WebAppConstants.CLAIM_API_TOKEN)?.Value
        };
    }
}

3. 控制组件重渲染频率 #

重写ShouldRender方法，仅在状态变化时触发重渲染：

private UserInfo? _previousUser;

protected override bool ShouldRender()
{
    var shouldRender = !Equals(_currentUser, _previousUser);
    _previousUser = _currentUser;
    return shouldRender;
}

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