Blazor WASM实现带数据库校验的自定义授权跳转方案咨询

原生AuthorizeView仅支持二元授权状态，无法覆盖账号禁用、待验证的中间场景，以下是完全基于Blazor官方扩展点的规范实现，不需要修改框架源码、不存在hack逻辑：

第一步：实现数据库实时校验的后端接口与客户端服务 #

Blazor WASM运行在浏览器端，无法直接访问数据库，先在后端API新增一个鉴权接口，每次调用直接查询数据库返回当前用户的最新访问状态：

// 后端API端点代码
app.MapGet("/api/user/access-status", async (ICurrentUserService userService) =>
{
    var currentUser = await userService.GetCurrentUserFromDatabaseAsync();
    return currentUser switch
    {
        null => new AccessStatusDto("Unauthenticated"),
        { IsDisabled: true } => new AccessStatusDto("Disabled"),
        { IsAccessCodeVerified: false } => new AccessStatusDto("PendingValidation"),
        _ => new AccessStatusDto("Authorized")
    };
}).RequireAuthorization();

// 配套返回DTO
public record AccessStatusDto(string Status);

在WASM客户端注册状态查询服务，增加短时间缓存避免重复请求：

// WASM客户端服务代码
public class UserAccessStateService
{
    private readonly HttpClient _httpClient;
    private static readonly TimeSpan _cacheExpire = TimeSpan.FromSeconds(3);
    private (string Status, DateTime CachedTime)? _cache;

    public UserAccessStateService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task<string> GetLatestAccessStatusAsync(bool forceRefresh = false)
    {
        if (!forceRefresh && _cache.HasValue && DateTime.Now - _cache.Value.CachedTime < _cacheExpire)
        {
            return _cache.Value.Status;
        }

        var result = await _httpClient.GetFromJsonAsync<AccessStatusDto>("/api/user/access-status");
        _cache = (result!.Status, DateTime.Now);
        return result.Status;
    }
}

// 在Program.cs中注册服务
builder.Services.AddScoped<UserAccessStateService>();

第二步：封装支持多状态分支的自定义授权组件 #

基于原生AuthorizeView封装自定义组件，扩展出账号禁用、待验证的独立渲染分支，完全符合Blazor组件开发规范：

// Shared/Components/SaasAuthorizeView.razor
@using Microsoft.AspNetCore.Components.Authorization
@inject UserAccessStateService AccessStateService
@inject NavigationManager Navigation

<AuthorizeView>
    <Authorized>
        @if (_currentStatus == AccessStatus.Loading)
        {
            <div class="loading-spinner">权限校验中...</div>
        }
        else if (_currentStatus == AccessStatus.Disabled)
        {
            if (DisabledFragment != null)
            {
                @DisabledFragment
            }
            else
            {
                Navigation.NavigateTo("/index", forceLoad: true);
            }
        }
        else if (_currentStatus == AccessStatus.PendingValidation)
        {
            if (PendingValidationFragment != null)
            {
                @PendingValidationFragment
            }
            else
            {
                Navigation.NavigateTo("/validate_access_code", forceLoad: true);
            }
        }
        else if (_currentStatus == AccessStatus.Authorized)
        {
            @ChildContent
        }
    </Authorized>
    <NotAuthorized>
        if (NotAuthorizedFragment != null)
        {
            @NotAuthorizedFragment
        }
        else
        {
            Navigation.NavigateTo("/index", forceLoad: true);
        }
    </NotAuthorized>
</AuthorizeView>

@code {
    private AccessStatus _currentStatus = AccessStatus.Loading;

    [Parameter, EditorRequired]
    public RenderFragment? ChildContent { get; set; }
    [Parameter]
    public RenderFragment? DisabledFragment { get; set; }
    [Parameter]
    public RenderFragment? PendingValidationFragment { get; set; }
    [Parameter]
    public RenderFragment? NotAuthorizedFragment { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        _currentStatus = Enum.Parse<AccessStatus>(await AccessStateService.GetLatestAccessStatusAsync());
    }

    private enum AccessStatus
    {
        Loading,
        Unauthenticated,
        Disabled,
        PendingValidation,
        Authorized
    }
}

第三步：替换受保护布局中的原生授权组件 #

你已经为公开页面配置了独立布局，只需要在SaaS模块的受保护布局（即你当前使用的MainLayout.razor）中替换为自定义的授权组件即可，两类布局完全隔离、互不影响：

// SaaS受保护页面使用的MainLayout.razor
@inherits LayoutComponentBase

<div class="saas-app-shell">
    <!-- 这里可以放受保护区域通用的侧边栏、顶部导航等公共UI -->
    <main class="content-wrapper">
        <SaasAuthorizeView>
            <ChildContent>
                @Body
            </ChildContent>
            <!-- 如果需要自定义对应状态的提示内容，可以在这里传入对应RenderFragment，不传则走默认跳转逻辑 -->
        </SaasAuthorizeView>
    </main>
</div>

实现说明 #

• 3秒的短缓存仅用于避免同一次页面生命周期内重复触发接口请求，不会影响状态校验的实时性，如果对实时性要求极高可以移除缓存逻辑
• 跳转时加forceLoad: true是为了清空客户端路由缓存，避免状态变更后页面残留，如果你需要无刷新体验，可以去掉该参数，在用户完成账号验证、账号状态变更后调用GetLatestAccessStatusAsync(forceRefresh: true)刷新本地状态即可
• 该实现完全基于Blazor官方公开的组件模型、服务注入、认证组件扩展能力，没有修改框架内部逻辑，后续版本升级不存在兼容性风险
• 公开页面使用你之前已经开发完成的独立布局，不会被这套授权逻辑影响

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