React权限管理系统实现

目录

一、需求

二、逻辑

三、实现

（一）代码

（二）解释

1. 获取权限对照数组 (queryReferencePermissionsInfo)

2. 获取处理对照数组 (queryDisposePermissionsInfo)

3. 获取权限映射表信息并处理 (queryPermissionsInfo)

4. 处理权限信息并获取指定模块和目标字典信息 (handlePermissionsInfo)

5. 获取相应app的权限信息 (queryAppPermissionsInfo)

6. 递归获取权限数组 (renderTreeNodes)

7. 处理权限信息并获取指定模块及目标权限的具体信息 (queryPermissionsChildren)

四、使用

五、总结

---

一、需求

        今年的4月份，我们的产品被甲方采购，并根据甲方需求更改了一下权限系统，由于原来的老旧权限系统过于臃肿且不够灵活，最重要的是没有注释看着很头大，于是我决定将权限系统重构。

二、逻辑

        其实逻辑很简单，就是将获取的权限数据进行处理然后通过传入不同的参数返回不同的处理后的数据。再用这些返回的数据进行页面上的权限控制。

三、实现

（一）代码

import globalUtil from '../utils/global';
import { formatMessage, FormattedMessage } from 'umi-plugin-locale';
import Exception from '../components/Exception'

const actionMaps = {
    admin: '管理员',
    developer: '开发者',
    viewer: '观察者',
    access: '访问者',
    owner: '拥有者'
};
const En_actionMaps = {
    admin: 'Administrators',
    developer: 'Developer',
    viewer: 'Observer',
    access: 'Visitor',
    owner: 'Owner'
};
const roleMaps = {
    admin: formatMessage({ id: 'utils.role.roleMaps_admin' }),
    app_store: formatMessage({ id: 'utils.role.roleMaps_app_store' })
};
const AccessText = {
    team_overview: '应用管理',
    team_app_create: '新建应用',
    team_app_manage: '应用控制',
    team_gateway_manage: '网关管理',
    team_plugin_manage: '插件管理',
    team_manage: '团队管理',
    app_overview: '应用总览',
    app_release: '应用发布',
    app_gateway_manage: '应用网关',
    app_upgrade: '应用升级',
    app_resources: '应用资源',
    app_config_group: '应用配置',
    route_manage: '路由管理',
    target_services: '目标服务',
    certificate: '证书管理',
    team_member: '成员管理',
    team_region: '集群管理',
    team_role: '角色管理',
    team_registry_auth: '镜像仓库授权管理',
    app_gateway_monitor: '网关监控',
    app_route_manage: '路由管理',
    app_target_services: '目标服务',
    app_certificate: '证书管理',
    team_gateway_monitor: '网关监控',
    team_route_manage: '路由管理',
    team_target_services: '目标服务',
    team_certificate: '证书管理',
    team_dynamic: '动态',
    team_overview_perms: '团队信息',
    app_backup: '应用备份',
    listed_manage: '上架管理',
    application_records: '申请记录',
    team_library_manage: '组件库',
};
const En_AccessText = {
    team_overview: 'Team overview',
    team_app_create: 'Create application',
    team_app_manage: 'Application management',
    team_gateway_manage: 'Gateway management',
    team_plugin_manage: 'Plug-in management',
    team_manage: 'Team management',
    app_overview: 'Application overview',
    app_release: 'Application publishing',
    app_gateway_manage: 'Application gateway',
    app_upgrade: 'Application upgrade',
    app_resources: 'Application resource',
    app_config_group: 'Application management',
    route_manage: 'Route management',
    target_services: 'Target service',
    certificate: 'Certificate management',
    team_member: 'Member management',
    team_region: 'Cluster management',
    team_role: 'Role management',
    team_registry_auth: 'Image warehouse authorization management',
    app_gateway_monitor: 'Gateway monitoring',
    app_route_manage: 'Route management',
    app_target_services: 'Target service',
    app_certificate: 'Certificate management',
    team_gateway_monitor: 'Gateway monitoring',
    team_route_manage: 'Route management',
    team_target_services: 'Target service',
    team_certificate: 'Certificate management',
    team_dynamic: 'Dynamic',
    team_overview_perms: 'Team information',
    app_backup: 'Application backup',
    listed_manage: 'Listed management',
    application_records: 'Application records',
    team_library_manage: 'Component library',
};

// 定义菜单与权限属性的映射结构
const teamMenuPermissionsMap = {
    team_overview_perms: 'isTeamOverview',//团队总览
    app_create: 'isTeamAppCreate',//新建应用
    team_gateway_monitor: 'isTeamGatewayMonitor',//网关监控
    team_route_manage: 'isTeamRouteManage',//路由管理
    team_target_services: 'isTeamTargetServices',//目标服务
    team_certificate: 'isTeamCertificate',//证书管理
    team_dynamic: 'isTeamDynamic',//动态
    team_region: 'isTeamRegion',//集群管理
    team_role: 'isTeamRole',//角色管理
    team_registry_auth: 'isTeamRegistryAuth',//镜像仓库授权管理
    team_plugin_manage: 'isTeamPluginManage',//插件管理
    application_records: 'isAudit',//申请记录
    listed_manage: 'isTeamPutaway',//上架管理
    team_library_manage: 'isTeamLibraryManage',//组件库
};

const appMenuPermissionsMap = {
    app_overview: 'isAppOverview', //应用总览
    app_release: 'isAppRelease',//应用发布
    app_upgrade: 'isAppUpgrade',//应用升级
    app_gateway_monitor: 'isAppGatewayMonitor',//网关监控
    app_route_manage: 'isAppRouteManage',//路由管理
    app_target_services: 'isAppTargetServices',//目标服务
    app_certificate: 'isAppCertificate',//证书管理
    app_resources: 'isAppResources',//应用资源
    app_config_group: 'isAppConfigGroup',//应用管理
    app_backup: 'isAppBackup',//应用备份