@wair/access-control

抽离访问控制相关页面代码，方便各项目集成

目录

• 集成指南
• 配置说明
• 组件使用
• 依赖说明

集成指南

1. 安装依赖

pnpm install @wair/access-control

2. 配置访问控制参数

在项目入口文件设置访问控制相关的配置：

import { setAccessControlConfig } from "@wair/access-control"

// 配置类型定义
type IConfig = {
	fetchData: () => Promise<any> // 用于发送请求的实例，例如 axios 实例
	isAxiosInstance: boolean // 是否是 axios 实例，原代码是用的fetch实例，调用方式有点不一样
	userGroupPath: string // 用户组页面的路径
}

// 配置示例
setAccessControlConfig({
	fetchData: request1,
	isAxiosInstance: true,
	userGroupPath: "/operation/group"
})

3. 页面集成

调用访问控制相关的页面组件：

import { UserManagementPage, UserGroupManagementPage, StrategyManagementPage } from "@wair/access-control"

// 用户组管理页面
export default function UserGroupManagement() {
  return (
    <UserGroupManagementPage />
  )
}

// 用户管理页面（需要权限控制和参数）
export default function UserManagement({ userInfo, clientId }) {
  return (
    <PermissionWrapper permissionField="user">
      <UserManagementPage userInfo={{ id: userInfo?.id }} clientId={clientId} />
    </PermissionWrapper>
  )
}

// 策略管理页面
export default function StrategyManagement() {
  return (
    <StrategyManagementPage />
  )
}

配置说明

| 配置项 | 类型 | 说明 | | ----------------- | ---------- | ------------------------------------------------------------ | | fetchData | Function | 用于发送请求的实例，例如 axios 实例 | | isAxiosInstance | boolean | 是否是 axios 实例，原代码是用的fetch实例，调用方式有点不一样 | | userGroupPath | string | 用户组页面的路径 |

组件使用

导出的组件

| 组件名称 | 说明 | 必需参数 | | ------------------------- | -------------- | ---------------------- | | UserManagementPage | 用户管理页面 | userInfo、clientId | | UserGroupManagementPage | 用户组管理页面 | 无 | | StrategyManagementPage | 策略管理页面 | 无 |

注意事项

1. 权限处理：组件内部未做页面权限相关处理，需要在组件外部包裹 PermissionWrapper 类似组件
2. 参数说明：UserManagementPage 组件需要传入 userInfo 和 clientId（sso登录的client_id）两个参数
3. React Query：页面中有使用到 @tanstack/react-query，需要在项目入口文件设置全局配置

依赖说明

项目需要安装以下前置依赖：

• react
• react-dom
• @douyinfe/semi-ui
• @douyinfe/semi-icons
• styled-components
• @tanstack/react-query
• dayjs
• valtio