antdpro v4实现动态菜单以及动态路由

氺愿

已于 2022-09-22 18:25:40 修改

阅读量953

点赞数 1

文章标签：前端 javascript typescript

于 2022-09-22 18:24:03 首次发布

本文链接：https://blog.csdn.net/qq_40113891/article/details/126996845

版权

想要做一个go+antdpro的一个简单的后台管理系统，方便以后在此基础上开发项目，刚刚遇到想要实现动态路由和动态菜单的效果，看了很多的博客都是修改框架里面的东西，感觉实现很麻烦，就去官网查看相关的文档，但是官网的文档写的太烂的，所以就自己实现。

动态菜单以及匹配相关路由

- - - 动态菜单
    - 动态路由

以下实现来源于官方文档：链接: antdpro

动态菜单

在src/app.tsx  layout中添加以下代码：

    //菜单
    menu: {
      request: async () => {
        const menus = await GetMenu(); //这里是后端请求到的结果
        const tree = MakemenuTree(menus); //这里是构建一个菜单的tree
        return tree;
      },
      locale: false, //关闭国际化
    },

//构建菜单tree,根据后台数据进行修改
interface menuTree {
  name: string;
  path: string;
  icon?: any;
  routes?: menuTree[];
}

const MakemenuTree = (data: any): menuTree[] => {
  const tree: menuTree[] = [];
  data.map((item: { child: any; icon: string; name: any; path: any }) => {
    const note: menuTree = {
      name: item.name,
      path: item.path,
      routes: [],
    };
    if (item.icon != '') {
      note.icon = IconMap.get(item.icon);  //因为创建的菜单icon不能识别，所以用map保存了icon
    }
    if (item.child.length > 0) {
      note.routes = MakemenuTree(item.child);
    }
    tree.push(note);
  });
  return tree;
};

动态路由

如果从后端直接请求到菜单后，直接关联组件是不能够显示的，所以就需要在config/routes中列出所有的路由，然后通过相关的权限设置就可以实现动态路由的效果。

config/routes.ts：

export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        path: '/user/login',
        component: './user/Login',
      },
      {
        component: './404',
      },
    ],
  },
  {
    path: '/welcome',
    icon: 'smile',
    component: './Welcome',
  },
  {
    path: '/admin',
    icon: 'crown',
    access: 'canAdmin',
    routes: [
      {
        path: '/admin/sub-page',
        icon: 'smile',
        access: 'sample',
        component: './Welcome',
      },
      {
        path: '/admin/sample',
        icon: 'smile',
        access: 'sample',
        component: './Welcome',
      },
      {
        component: './404',
      },
    ],
  },
  {
    icon: 'table',
    path: '/list',
    access: 'caTable',
    component: './TableList',
  },
  {
    path: '/',
    redirect: '/welcome',
  },
  {
    component: './404',
  },
];

可以看到里面最关键的地方就是添加access属性,这个就是权限的设置，只有符合这个权限才可以访问这个页面。
关联access，修改src/access.ts

/**
 * @see https://umijs.org/zh-CN/plugins/plugin-access
 * */
export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
  const { currentUser } = initialState ?? {};

  return {
    canAdmin: currentUser && currentUser.auth?.includes('admin'),
    caTable: currentUser && currentUser.auth?.includes('tables'),
    sample: currentUser && currentUser.auth?.includes('sample'),
  };
}