umi项目菜单权限管理(access)

介是官方文档中给出的描述

我们约定了 src/access.js 为我们的权限定义文件,该文件需要默认导出一个方法,导出的方法会在项目初始化时被执行。该方法需要返回一个对象,对象的每一个值就对应定义了一条权限。如下所示:

export default function access(initialState) {
  const { jwt } = initialState || {};
  const { groups = [] } = jwt;  // 获取初始化数据的token解析来的用户信息组
  return {    // 返回的对象里面可以定义多个权限,也就是多个键值对
    isAdmin: groups.includes('MAX-ADMIN'),  // 若返回用户信息组里面包含MAX-ADMIN,则就是有权限查看
    isOwner: groups.includes('OWNER')
  };
}

其中 initialState 是通过初始化状态插件 @umijs/plugin-initial-state 提供的数据,你可以使用该数据来初始化你的用户权限。不清楚如何使用initialState的移步我的另一篇博客

定义好了权限之后,可以在路由文件中使用:

// config/route.ts
export const routes =  [
  {
    path: '/pageA',
    component: 'PageA',
    access: 'isAdmin', // 权限定义返回值的某个 key
  },
  {
    path: '/pageB',
    component: 'PageB',
    access: 'isOwner', // 权限定义返回值的某个 key
  },
]

文档中还给出了其他用法,根据项目需求使用
就酱~

umiroutes 文件中,可以通过配合 dva 或者 redux 状态管理工具,以及 umi 的权限控制插件 @umijs/plugin-access 实现根据权限动态生成路由。以下是一种可能的实现方式: 1. 在 umi 的配置文件 config.js 中,配置 @umijs/plugin-access 插件: ```javascript export default { plugins: [ ['@umijs/plugin-access', { access: './src/access.ts', // 配置权限控制文件的路径 }], ], } ``` 2. 在 src/access.ts 文件中,定义菜单权限的判断逻辑。这里假设权限信息存储在 redux store 中: ```javascript export default function access(initialState: any) { const { user } = initialState; return { menuFilter: (menuData: any[]) => menuData.filter((menu) => { if (!menu.authority) { // 如果菜单没有定义权限,则直接显示 return true; } if (Array.isArray(menu.authority)) { // 如果菜单定义了多个权限,只要有一个权限满足则显示 return menu.authority.some((auth) => user.authorities.includes(auth)); } return user.authorities.includes(menu.authority); // 如果菜单只定义了一个权限,则必须满足该权限才显示 }), }; } ``` 3. 在菜单配置文件中,为每个菜单项添加 authority 属性,指定该菜单项需要的权限: ```javascript export default [ { path: '/dashboard', name: 'Dashboard', icon: 'dashboard', // 定义多个权限 authority: ['admin', 'user'], routes: [ { path: '/dashboard/monitor', name: 'Monitor', component: './Dashboard/Monitor', }, { path: '/dashboard/analysis', name: 'Analysis', component: './Dashboard/Analysis', }, ], }, { path: '/list', name: 'List', icon: 'table', // 只定义一个权限 authority: 'admin', routes: [ { path: '/list/search', name: 'Search Table', component: './List/TableList', }, { path: '/list/basic-list', name: 'Basic List', component: './List/BasicList', }, ], }, ]; ``` 4. 在菜单组件中,通过 connect 方法获取 redux store 中的用户信息,然后将菜单数据传入 @umijs/plugin-access 插件的 menuFilter 方法进行权限过滤: ```javascript import { connect } from 'dva'; import { getMenuData } from '@umijs/route-utils'; import { useIntl } from 'umi'; import styles from './index.less'; const BasicLayout: React.FC<BasicLayoutProps> = (props) => { const { children, location, user } = props; const { formatMessage } = useIntl(); const menuDataRef = useRef([]); const menuData = useMemo(() => getMenuData(props.route.routes, menuDataRef.current), [ props.route.routes, ]); const filteredMenuData = useAccess().menuFilter(menuData); return ( <div className={styles.container}> <Layout> <SiderMenu logo={logo} title={formatMessage({ id: 'app.title' })} menuData={filteredMenuData} location={location} collapsed={collapsed} onCollapse={handleMenuCollapse} /> <Layout> <Header ... /> <Content className={styles.content}> ... </Content> <Footer ... /> </Layout> </Layout> </div> ); }; export default connect(({ user }: ConnectState) => ({ user, }))(BasicLayout); ``` 这样,当用户具有某个菜单项的其中一个权限时,该菜单项就会显示在菜单中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值