.NET 8 Blazor Server用JWT认证时<AuthorizeView>报错咨询

核心原因 #

交互式服务器渲染模式下，Blazor组件会先执行静态预渲染，此时浏览器的JavaScript运行时还未与服务器建立SignalR连接，也未完成初始化。如果依赖的认证状态逻辑在预渲染阶段尝试读取客户端存储（比如localStorage中的JWT令牌），就会触发JavaScript interop calls cannot be issued at this time错误。

具体解决方法 #

1. 禁用组件预渲染 #

在引用的组件或Routes.razor中，通过@rendermode指定仅在交互式模式下渲染，跳过预渲染阶段：

<AuthorizeView @rendermode="InteractiveServer">
    <Authorized>
        <p>已登录：@context.User.Identity?.Name</p>
    </Authorized>
    <NotAuthorized>
        <p>请登录</p>
    </NotAuthorized>
</AuthorizeView>

也可以在组件级别全局设置：

@page "/"
@rendermode InteractiveServer

<AuthorizeView>
    <!-- 组件内容 -->
</AuthorizeView>

2. 调整认证逻辑，避开预渲染阶段执行JS操作 #

如果需要保留预渲染，需确保认证逻辑在JS环境就绪后再执行。利用OnAfterRenderAsync生命周期方法，在组件首次渲染完成后加载认证状态：

• 组件内处理逻辑：

@page "/"
@inject IJSRuntime JSRuntime
@inject AuthenticationStateProvider AuthStateProvider

<p>@authStatus</p>

@code {
    private string authStatus = "加载中...";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // JS环境就绪后读取令牌
            var token = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "jwtToken");
            
            // 传递令牌给自定义认证状态提供器更新身份
            ((CustomAuthStateProvider)AuthStateProvider).SetToken(token);
            
            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
            authStatus = authState.User.Identity?.IsAuthenticated ?? false ? "已登录" : "未登录";
            
            StateHasChanged();
        }
    }
}

• 自定义认证状态提供器（避免预渲染时触发JS调用）：

public class CustomAuthStateProvider : AuthenticationStateProvider
{
    private ClaimsPrincipal _user = new ClaimsPrincipal(new ClaimsIdentity());

    public void SetToken(string token)
    {
        if (string.IsNullOrEmpty(token))
        {
            _user = new ClaimsPrincipal(new ClaimsIdentity());
        }
        else
        {
            // 解析JWT生成ClaimsPrincipal
            var handler = new JwtSecurityTokenHandler();
            var jwtToken = handler.ReadJwtToken(token);
            _user = new ClaimsPrincipal(new ClaimsIdentity(jwtToken.Claims, "jwt"));
        }
        
        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(_user)));
    }

    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        // 预渲染时返回匿名用户，避免触发JS操作
        return Task.FromResult(new AuthenticationState(_user));
    }
}

3. 配置项目认证服务 #

在Program.cs中正确注册自定义认证状态提供器：

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

注意事项 #

• 交互式服务器渲染模式下，SignalR连接建立前的预渲染阶段无法执行JS互操作，所有依赖JS的操作必须放在OnAfterRenderAsync的firstRender分支中。
• 不要在OnInitializedAsync或构造函数中执行JS调用，这些阶段属于预渲染阶段，JS环境未就绪。

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