如何在Blazor中使用Fluxor实现动态组件内按权限展示数据

1. 状态层前置权限过滤 #

Fluxor的Effect和Reducer是处理数据的核心节点，你可以在此处完成第一层权限过滤：

• 首先新增用户权限状态，将当前登录用户的权限标识集合（和你现有数据的权限标识字段对应）存入Fluxor状态，可在应用初始化时通过AuthenticationStateProvider获取用户信息后写入。
• 所有拉取业务数据的Effect中，拿到接口返回的原始数据后，先做过滤，仅保留当前用户权限匹配的数据项，再将过滤后的数据派发给Reducer更新状态。

重要提示：前端权限过滤仅用于优化展示体验，后端接口必须同步做权限校验，避免用户通过调试工具篡改状态获取未授权数据。
示例Effect实现：

public class FetchBusinessDataEffect : Effect<FetchBusinessDataAction>
{
    private readonly IBusinessDataService _dataService;
    private readonly IState<UserPermissionState> _userPermissionState;

    public FetchBusinessDataEffect(IBusinessDataService dataService, IState<UserPermissionState> userPermissionState)
    {
        _dataService = dataService;
        _userPermissionState = userPermissionState;
    }

    public override async Task HandleAsync(FetchBusinessDataAction action, IDispatcher dispatcher)
    {
        // 从接口拉取数据（后端需先做一次权限过滤，此处为前端二次过滤适配展示）
        var rawData = await _dataService.GetListAsync();
        // 用现有数据的权限标识字段和用户权限匹配过滤
        var allowedData = rawData
            .Where(data => _userPermissionState.Value.Permissions.Contains(data.AuthFlag))
            .ToList();
        dispatcher.Dispatch(new FetchBusinessDataSuccessAction(allowedData));
    }
}

2. 组件层粒度权限控制 #

如果需要控制单个动态组件/组件内部分模块的可见性，可封装通用权限校验组件：

@inject IState<UserPermissionState> UserPermissionState
@if (HasPermission)
{
    @ChildContent
}

@code {
    /// 传入当前数据对应的权限标识
    [Parameter, Required]
    public string RequiredAuthFlag { get; set; }
    [Parameter, Required]
    public RenderFragment ChildContent { get; set; }

    private bool HasPermission => 
        UserPermissionState.Value.Permissions.Contains(RequiredAuthFlag);
}

在渲染动态组件的地方直接包裹使用即可：

@foreach (var dataItem in FilteredDataList)
{
    <AuthWrapper RequiredAuthFlag="dataItem.AuthFlag">
        <DynamicComponent Type="GetComponentType(dataItem)" Parameters="GetComponentParams(dataItem)" />
    </AuthWrapper>
}

3. 冗余校验优化 #

如果你的业务中有多个入口会修改业务数据状态，可在对应Reducer中再增加一次权限校验，确保存入状态的所有数据都是当前用户有权限查看的，避免逻辑遗漏导致越权展示。

相关参考 #

你可以查阅Fluxor官方文档中Effect、状态依赖注入相关的章节，以及Blazor官方文档中身份验证、授权组件的实现指南，结合自身业务逻辑调整即可。

内容的提问来源于stack exchange，提问作者Noor All Safaet