如何在UmiJS中根据用户权限动态渲染菜单?

1.路由，在路由配置用
access属性来指定用户需要哪些权限才能访问这个路由

// 
export default {
  // 其他配置...
  routes: [
    { path: '/foo', component: '@/pages/foo', access: 'canReadFoo' },
    // 其他路由配置...
  ],
  // 其他配置...
};

2.access.ts文件

export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
  // console.log('access', initialState)
  const { currentUser,  privilege     } = initialState ?? {};
  if(!currentUser) {
    return {}
  }
  // creator true
  if(currentUser.creator) {
    if(privilege)  {
      let obj = {} as any
      privilege.map(it => {
        obj[it.module] = it.actions
      })
      return obj
    }
  }else {
    const role = currentUser.role.privilege as {[key:string]: string[]}

    return role
 
  }
  return { };
}

3.自控路由菜单
ant design中的app.tsx中配置menuDataRender

import { useModel } from 'umi';

export default {
  // 其他配置...
  menuDataRender: () => {
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState;

    return routes => routes.filter(route => {
      // 如果路由没有 access 属性，那么这个路由对所有用户都是可见的
      if (!route.access) return true;

      // 如果路由有 access 属性，那么我们需要检查用户是否有访问这个路由的权限
      return currentUser && currentUser.permissions.includes(route.access);
    });
  },
  // 其他配置...
};

4.在各个组件中，根据权限，是否显示个别功能，比如，是否有编辑权限?

// 可以在urils/api.ts 文件中写个方法。
import { request, useAccess, useModel } from '@umijs/max';

export const useEditPrivilege = (name:string) => {
  const access = useAccess() as {[key:string]: string[]}
  // .includes('编辑') 这个不一定，要根据后台的接口情况，我们写一些判断逻辑
  const hasEdit = access?.[name] && access.[name].includes('编辑')
    return hasEdit
}

组件中运用

cons Index = () => {
    const hasEdit = useEditPrivilege('告警处理')
	return hasEdit ? '有权限':'没有权限'
}

export default Index

谢谢大家~