@hzab/permissions

权限组件

node@14.21

组件

示例

路由、侧边栏权限数据

页面路由完整示例

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 | |

routerConfig

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --------------- | -------- | ---- | ------ | -------------- | --- | | componentLoader | Function | 是 | - | 模块加载的方法 | |

组件开发流程

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

文件目录

example 本地开发测试代码
src 组件源码
lib 组件打包编译后的代码

命令

本地运行：npm run dev
打包编译：npm run build

发布

注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
编译组件：npm run build
命令：npm publish --access public
发布目录：
- lib
- src