@hzab/permissions NPM

@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