📋 概述
checkPermissionModifier 是一个React高阶组件(HOC)，用于为任意组件添加权限检查功能。通过装饰器模式，实现权限数据的异步获取和注入。
🎯 核心功能
✅ 权限数据获取：异步调用权限检查API
✅ 数据注入：将权限列表注入到目标组件
✅ 组件复用：可装饰任意React组件
✅ 类型安全：保持原组件的props类型
🏗️ 架构设计
整体架构流程
graph TB
A[业务组件] --> B[checkPermissionModifier装饰器]
B --> C[高阶组件HOC]
C --> D[权限API调用]
D --> E[权限数据获取]
E --> F[状态更新]
F --> G[props注入]
G --> H[渲染包装组件]
style A fill:#e1f5fe
style C fill:#f3e5f5
style E fill:#e8f5e8
style H fill:#fff3e0组件生命周期流程
sequenceDiagram
participant App as 应用启动
participant HOC as 高阶组件
participant API as 权限API
participant State as 组件状态
participant Target as 目标组件
App->>HOC: 创建包装组件
HOC->>HOC: componentDidMount()
HOC->>API: checkPermission(param)
API-->>HOC: 返回权限列表
HOC->>State: 更新checkPermissionList
State->>Target: 注入权限数据
Target->>Target: 渲染UI💻 代码实现分析
装饰器模式结构
classDiagram
class checkPermissionModifier {
+function(param)
+return function(WrappedComponent)
+return HOC class
}
class HOC {
+state: checkPermissionList
+componentDidMount()
+render()
}
class WrappedComponent {
+props: checkPermissionList
+原始props
}
checkPermissionModifier --> HOC
HOC --> WrappedComponent数据流向图
flowchart LR
A[param参数] --> B[checkPermission API]
B --> C[异步响应数据]
C --> D[组件状态state]
D --> E[props传递]
E --> F[目标组件使用]
style A fill:#ffeb3b
style C fill:#4caf50
style F fill:#2196f3🔧 使用方式
基础用法
// 1. 装饰器语法
@checkPermissionModifier({ moduleCode: 'USER_MANAGE' })
class UserManageComponent extends React.Component {
render() {
const { checkPermissionList } = this.props;
return (
<div>
{checkPermissionList.includes('CREATE') && (
<Button>新增用户</Button>
)}
</div>
);
}
}
// 2. 函数调用语法
const EnhancedComponent = checkPermissionModifier({
moduleCode: 'USER_MANAGE'
})(UserManageComponent);权限检查逻辑
graph TD
A[组件挂载] --> B[调用checkPermission API]
B --> C{API调用成功?}
C -->|是| D[更新权限列表状态]
C -->|否| E[设置空数组]
D --> F[重新渲染组件]
E --> F
F --> G[目标组件获得权限数据]
style C fill:#fff59d
style D fill:#c8e6c9
style E fill:#ffcdd2📊 技术特点
优势分析
设计模式应用
mindmap
root((设计模式))
装饰器模式
动态添加功能
不修改原组件
支持多层装饰
高阶组件模式
组件复用
逻辑抽象
Props注入
异步处理模式
生命周期管理
状态管理
错误处理🚀 性能优化建议
优化方案
graph LR
A[当前实现] --> B[优化方案]
subgraph "当前问题"
C[每次挂载都请求API]
D[无缓存机制]
E[无错误处理]
end
subgraph "优化建议"
F[添加权限缓存]
G[错误边界处理]
H[Loading状态管理]
I[权限数据预加载]
end
A --> C
A --> D
A --> E
B --> F
B --> G
B --> H
B --> I改进代码示例
// 优化后的权限修饰器
function checkPermissionModifier(param) {
return function(WrappedComponent) {
return class extends React.Component {
state = {
checkPermissionList: [],
loading: true,
error: null
};
async componentDidMount() {
try {
// 添加缓存检查
const cacheKey = JSON.stringify(param);
const cached = permissionCache.get(cacheKey);
if (cached) {
this.setState({
checkPermissionList: cached,
loading: false
});
return;
}
const response = await checkPermission(param);
// 缓存权限数据
permissionCache.set(cacheKey, response);
this.setState({
checkPermissionList: response || [],
loading: false
});
} catch (error) {
this.setState({
error: error.message,
loading: false
});
}
}
render() {
const { checkPermissionList, loading, error } = this.state;
if (loading) return <LoadingComponent />;
if (error) return <ErrorComponent error={error} />;
return (
<WrappedComponent
{...this.props}
checkPermissionList={checkPermissionList}
/>
);
}
};
};
}📈 应用场景
典型使用场景
graph TB
A[权限控制场景] --> B[按钮权限]
A --> C[菜单权限]
A --> D[页面权限]
A --> E[功能权限]
B --> F[新增/编辑/删除按钮]
C --> G[导航菜单显示/隐藏]
D --> H[页面访问控制]
E --> I[特定功能模块]
style A fill:#e3f2fd
style F fill:#e8f5e8
style G fill:#e8f5e8
style H fill:#e8f5e8
style I fill:#e8f5e8🎨 总结
checkPermissionModifier 组件通过装饰器模式和高阶组件技术，实现了：
权限逻辑的解耦：将权限检查从业务组件中分离
代码复用性：一次编写，多处使用
维护便利性：权限逻辑集中管理
扩展性：支持不同权限参数配置
这是一个典型的横切关注点处理方案，为前端权限管理提供了优雅的解决方案。