@hzab/permissions

权限组件

• [email protected]

组件

示例

路由、侧边栏权限数据

页面路由完整示例

import { lazy } from "react";
import { getRouters } from "@/servers";

import { _mobx, observer } from "@/store/index";

import { setStore, Router } from "@hzab/permissions";

import { routes } from "./router/routes";

// 设置权限数据源
setStore(_mobx, observer);

const App = () => {
  return (
    <Router
      getRouters={getRouters}
      defaultRoutes={routes}
      routerConfig={{
        componentLoader(component) {
          return lazy(() => import("@/" + component));
        },
      }}
    />
  );
};

export default observer(App);

defaultRoutes

/**
 * 页面路由配置
 * 注意：子页面必须以父页面的路由为前缀。以此解决详情页等子页面无激活态的问题
 * /user-server/user-list /user-server/user-list/detail
 */
const routes: any = [
  {
    path: "/",
    redirect: "/index",
  },
  {
    path: "/",
    isLayout: true,
    component: "components/Layout/index",
    children: [
      {
        name: "首页",
        path: "/index",
        component: "pages/index/index",
      },
    ],
  },
  {
    name: "404",
    path: "*",
    component: "pages/404",
  },
];

export { routes };

获取权限数据

import { getRouterPermission } from "@hzab/permissions";

const res = await getRouterPermission();
_mobx.sidebarMenus = res.sidebarMenus;
routeElement = res?.routeElement;

权限接口数据格式

// menuType: 目录M，菜单C，按钮F
const routerRes = [
  {
    menuId: 338,
    menuName: "用户服务",
    parentId: 2,
    orderNum: 1,
    path: "/user-server",
    isFrame: 1,
    isCache: 0,
    menuType: "M",
    visible: "0",
    status: "0",
    perms: "",
    icon: "UserOutlined",
    createTime: "2023-04-12T21:02:59",
    children: [
      {
        menuId: 345,
        menuName: "用户管理",
        parentId: 338,
        orderNum: 0,
        path: "/user-server/user-list",
        component: "/user-server/user-list",
        isFrame: 1,
        isCache: 0,
        menuType: "C",
        visible: "0",
        status: "0",
        perms: "user:user:list",
        createTime: "2023-04-13T13:57:11",
        uri: "/userinfo",
        isApp: null,
      },
      {
        menuId: 343,
        menuName: "用户详情",
        parentId: 338,
        orderNum: 0,
        path: "/user-server/user-list/detail",
        component: "/user-server/user-list/detail",
        isFrame: 1,
        isCache: 0,
        menuType: "C",
        visible: "1",
        status: "0",
        perms: "user:user:detail",
        createTime: "2023-04-13T13:50:11",
        isApp: null,
      },
    ],
    isApp: null,
  },
];

按钮权限

// 入口配置权限数据源
import { _mobx } from "@/store/index";
import { setStore } from "@hzab/permissions";

// 设置权限数据源
setStore(_mobx);

// 使用
import { HasPermission, hasPermission } from "@hzab/permissions";

<HasPermission permission="test">test</HasPermission>;
hasPermission("test");

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------------------- | -------- | ---- | ------ | ------------------------------------------------------------------------------------------ | --- | | getRouters | Function | 是 | - | 获取动态路由配置的函数 | | | defaultRoutes | Array | 是 | - | 默认的路由配置 | | | routerConfig | Object | 是 | - | getRouterPermission 权限路由处理函数相关配置项 | | | RouterMode | Object | 否 | - | RouterMode 自定义 路由模式（import { HashRouter, BrowserRouter } from 'react-router-dom'） | | | mode | string | 否 | hash | hash、history | | | loginPath | string | 否 | /login | 登录页 ptah ，用于判断是否需要 重新获取权限相关数据 | | | updateMobxSidebarMenus | boolean | 否 | true | 是否更新 mobx 中的 sidebarMenus 字段数据 | | | reInitKey | string | 否 | | 重新获取权限相关数据 | |

routerConfig

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --------------- | -------- | ---- | ------ | ----------------------------------------------------------- | --- | | componentLoader | Function | 是 | - | 模块加载的方法 | | | getPermissions | Function | 否 | - | 获取权限字符数组的函数，传入后菜单/路由通过权限字符进行过滤 | |

组件开发流程

• 在 config/webpack.config.js 中按需修改 library 配置的文件名
• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 src/typings.d.ts 中按需修改 declare module 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码

命令

• Mac 执行该命令，设置 pre-commit 为可执行文件

  • npm run mac-chmod
  • chmod +x .husky && chmod +x .husky/pre-commit

• 生成文档：npm run docs

• 本地运行：npm run dev

发布

• npm 源和云效源都需要发布

• 命令：npm publish --access public

• 发布目录：

  • src

迭代发布命令-版本自增

• beta: 需要手动修改 package.json 中的 version，添加 -betaX 版本号。使用 npm publish --beta 发布
• 0.0.x: npm run publish-patch
• 0.x.0: npm run publish-minor
• x.0.0: npm run publish-major

nrm

• 安装 npm install -g nrm
• 增加源 nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
• 切换源 nrm use aliyun nrm use npm
• 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看） npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js