Blazor 9中JWT认证状态在预渲染与交互渲染间传递方案咨询

方案1：服务器端临时存储+组件参数传递 #

预渲染登录成功后，将JWT存入服务器端临时存储（如内存缓存），生成唯一ID作为组件参数传递给交互式模式，组件初始化时用ID从服务器获取JWT并更新认证状态。

实现步骤： #

1. 预渲染登录组件的登录逻辑：

public async Task HandleLogin()
{
    // 调用远程API获取JWT令牌
    var jwtToken = await _remoteApiClient.LoginAsync(LoginCredentials);
    
    // 生成唯一标识，将JWT存入内存缓存并设置过期时间
    var tempTokenId = Guid.NewGuid().ToString();
    await _memoryCache.SetAsync(tempTokenId, jwtToken, new MemoryCacheEntryOptions
    {
        AbsoluteExpirationRelativeToNow = TimeSpan.FromMinutes(10)
    });
    
    // 导航到交互式页面，携带tempTokenId参数
    NavigationManager.NavigateTo($"/home?tempId={tempTokenId}", forceLoad: true);
}

2. 交互式组件初始化获取JWT：

protected override async Task OnInitializedAsync()
{
    // 解析URL中的临时标识
    var uri = new Uri(NavigationManager.Uri);
    var tempTokenId = HttpUtility.ParseQueryString(uri.Query).Get("tempId");
    
    if (!string.IsNullOrEmpty(tempTokenId))
    {
        // 从缓存获取JWT
        var jwtToken = await _memoryCache.GetAsync<string>(tempTokenId);
        if (!string.IsNullOrEmpty(jwtToken))
        {
            // 构建认证状态并更新
            var claims = ParseJwtClaims(jwtToken);
            var authState = new AuthenticationState(new ClaimsPrincipal(
                new ClaimsIdentity(claims, "JwtAuthentication")));
            ((CustomAuthStateProvider)_authStateProvider).UpdateAuthenticationState(authState);
            
            // 删除缓存中的临时标识，防止重复使用
            await _memoryCache.RemoveAsync(tempTokenId);
            
            // 清除URL中的临时参数
            NavigationManager.NavigateTo("/home", replace: true);
        }
    }
}

3. 自定义AuthenticationStateProvider：

public class CustomAuthStateProvider : AuthenticationStateProvider
{
    private AuthenticationState _currentAuthState;

    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        return Task.FromResult(_currentAuthState ?? new AuthenticationState(new ClaimsPrincipal()));
    }

    public void UpdateAuthenticationState(AuthenticationState newState)
    {
        _currentAuthState = newState;
        NotifyAuthenticationStateChanged(Task.FromResult(newState));
    }
}

方案2：利用HttpContext.Items传递（托管/Server模式适用） #

预渲染阶段登录成功后，将JWT存入HttpContext.Items，交互式模式启动时通过服务器端点读取该值（预渲染与首次交互式请求共享同一HttpContext）。

实现步骤： #

1. 预渲染登录组件存储JWT到HttpContext：

private readonly IHttpContextAccessor _httpContextAccessor;

public async Task HandleLogin()
{
    var jwtToken = await _remoteApiClient.LoginAsync(LoginCredentials);
    // 将JWT存入当前请求的HttpContext.Items
    _httpContextAccessor.HttpContext.Items["ActiveJwtToken"] = jwtToken;
    // 导航到交互式页面
    NavigationManager.NavigateTo("/dashboard", forceLoad: true);
}

2. 添加服务器端点用于获取JWT：

// 在Program.cs中注册端点
app.MapGet("/api/retrieve-jwt", (HttpContext context) =>
{
    if (context.Items.TryGetValue("ActiveJwtToken", out var tokenObj))
    {
        var jwtToken = tokenObj.ToString();
        // 读取后移除，避免重复获取
        context.Items.Remove("ActiveJwtToken");
        return Results.Ok(new { Token = jwtToken });
    }
    return Results.NotFound();
});

3. 交互式组件初始化获取并设置认证状态：

protected override async Task OnInitializedAsync()
{
    var tokenResponse = await _httpClient.GetFromJsonAsync<JwtResponse>("/api/retrieve-jwt");
    if (tokenResponse != null && !string.IsNullOrEmpty(tokenResponse.Token))
    {
        var claims = ParseJwtClaims(tokenResponse.Token);
        var authState = new AuthenticationState(new ClaimsPrincipal(
            new ClaimsIdentity(claims, "JwtAuthentication")));
        ((CustomAuthStateProvider)_authStateProvider).UpdateAuthenticationState(authState);
    }
}

方案3：Blazor Server专属会话存储 #

如果是Blazor Server模式，直接将JWT存入服务器端会话，自定义AuthenticationStateProvider从会话读取认证信息。

实现步骤： #

1. 登录逻辑存储JWT到会话：

public async Task HandleLogin()
{
    var jwtToken = await _remoteApiClient.LoginAsync(LoginCredentials);
    // 将JWT存入会话
    HttpContext.Session.SetString("JwtToken", jwtToken);
}

2. 自定义会话驱动的AuthenticationStateProvider：

public class SessionAuthStateProvider : AuthenticationStateProvider
{
    private readonly IHttpContextAccessor _httpContextAccessor;

    public SessionAuthStateProvider(IHttpContextAccessor httpContextAccessor)
    {
        _httpContextAccessor = httpContextAccessor;
    }

    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var jwtToken = _httpContextAccessor.HttpContext.Session.GetString("JwtToken");
        if (string.IsNullOrEmpty(jwtToken))
        {
            return Task.FromResult(new AuthenticationState(new ClaimsPrincipal()));
        }

        var claims = ParseJwtClaims(jwtToken);
        var identity = new ClaimsIdentity(claims, "JwtAuthentication");
        return Task.FromResult(new AuthenticationState(new ClaimsPrincipal(identity)));
    }

    // 更新会话中的JWT并通知状态变更
    public void UpdateJwtToken(string newJwtToken)
    {
        _httpContextAccessor.HttpContext.Session.SetString("JwtToken", newJwtToken);
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }
}

注意事项： #

• 内存缓存方案需设置合理过期时间，多服务器部署时需改用分布式缓存（如Redis）。
• HttpContext.Items仅在单次请求周期内有效，必须在预渲染后的首次交互式请求中读取。
• Blazor Server使用会话需先在Program.cs中启用：app.UseSession();

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