文章转自我的语雀：https://www.yuque.com/liuyin-zzwa0/ada6ao/va6p77

项目中使用了动态菜单，其中含有固定和非固定的菜单，但是我们的后端同事只在登陆时返回含有动态菜单name的数组。

如何实现？

菜单生成过程

阅读源码我们可以发现，在 layouts/BasicLayout中可以看到 menuData 是从 menu.js 中获取的

export default connect(({ global, setting, menu: menuModel }) => ({
  collapsed: global.collapsed,
  layout: setting.layout,
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
  ...setting,
}))(props => (
  <Media query="(max-width: 599px)">
    {isMobile => <BasicLayout {...props} isMobile={isMobile} />}
  </Media>
));

找到 menuData 的生成方式

image.png

routes 就是运行生成的.umi/router.js 的内容，将其输出我们可以直观的看见它的具体结构

image.png

修改配置路由

在 router.config.js 中使用 dynamic 去标志该目录（路由）是动态的

{
        path: '/profile',
        name: 'profile',
        icon: 'profile',
        dynamic: true,
        routes: [
          {
            path: '/profile/basic',
            name: 'basic',
            component: './Profile/BasicProfile',
          },
          {
            path: '/profile/basic/:id',
            name: 'basic',
            hideInMenu: true,
            component: './Profile/BasicProfile',
          },
          {
            path: '/profile/advanced',
            name: 'advanced',
            authority: ['admin'],
            dynamic: true,
            component: './Profile/AdvancedProfile',
          },
        ],
},

过滤实际路由

大体思路就是对 routes 进行数据处理，将登录获取到的特定路由（这里用 name 属性标识）在 routes 中过滤出来

 effects: {
    *getMenuData({ payload }, { put }) {
      const { routes, authority } = payload;
      const routerMap = filterRouters(routes); // 这边取出实际的路由表
      const menuData = filterMenuData(memoizeOneFormatter(routerMap, authority));
      // const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);
      const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(memoizeOneFormatter(routerMap, authority)); //这是修改后的代码，因为menuData是已经过滤掉存在hideInMenu
      yield put({
        type: 'save',
        payload: { menuData, breadcrumbNameMap, routerMap, routerData: routes }, // 将实际的路由一同放入
      });
    },
  },
    

const filterRouters = routes => {
  if (!routes) return [];
  const sectionlist = ['profile.advanced']; // 数组中就是包含的动态路由
  const sectionList = sectionlist.filter(item => item && isString(item));
  const oneLevel = sectionList.filter(item => item.split('.').length >= 1).map(item => item.split('.')[0]);
  const levelMore = sectionList.filter(item => item.split('.').length > 1);
  routes = filterLevel1(routes, oneLevel);
  let list = [];
  routes.forEach(route => {
    let deep = 0;
    list.push(filyer(levelMore, route, deep));
  });
  return list.filter(item => item);
}

const filterLevel1 = (routes, names) => {
  return routes.filter(route => !route.dynamic || (route.dynamic && names.includes(route.name)));
}

const filyer = (sectionList, route, deep) => {
  let obj = { ...route };
  let sections = sectionList.filter(s => s.indexOf(route.name) === 0);
  if (!route.dynamic && (!obj.routes || !obj.routes.length)) return obj;
  if (!sections.length && route.dynamic && deep !== 0) {
    return null;
  }
  let oneLevel = sections.filter(item => item.split('.').length >= 2).map(item => item.split('.')[1]);
  let levelMore = sections.filter(item => item.split('.').length > 2).map(item => item.split('.').slice(1).join('.'));
  obj.routes = filterLevel1(obj.routes, oneLevel);
  if (levelMore.length) {
    let list = [];
    deep++;
    obj.routes.forEach(item => {
      list.push(filyer(levelMore, item, deep));
    });
    obj.routes = list.filter(a => a);
  }
  return obj;
}

此时的 menuData 就是我们想要的实际菜单了

应用动态路由

实现不跳转的页面 404 、403

旧版本（2.x）回到 layouts/BasicLayout 中，从props中取出 routerMap

const baseRouterConfig = this.getRouterAuthority(pathname, routes); // 完整的项目路由
const routerConfig = this.getRouterAuthority(pathname, routerMap); // 账号的实际路由

权限组件 Authorized ，使用这个组件就能实现不跳转的 404、403页面了

<Content className={styles.content} style={contentStyle}>
  {/* 先校验完整的项目路由 */}
  <Authorized authority={baseRouterConfig} noMatch={<Exception404 />}>
     {/* 校验账号的实际路由 */}
    <Authorized authority={routerConfig} noMatch={<Exception403 />}>
      {children}
    </Authorized>
  </Authorized>
</Content>

 新版本（3.x）在 layouts/BasicLayout 组件中移除了权限组件并在 `pages/Authorized.js`使用了登录状态判断，但这样同样会出现[嵌套路由](https://www.yuque.com/liuyin-zzwa0/ada6ao/qi3n6u) umi404的情况，因此我们需要对 `pages/Authorized.js` 进行改造。

import React from 'react';
import Redirect from 'umi/redirect';
import pathToRegexp from 'path-to-regexp';
import { connect } from 'dva';
import Authorized from '@/utils/Authorized';
import { getAuthority } from '@/utils/authority';
import Exception403 from '@/pages/Exception/403';
import Exception404 from '@/pages/Exception/404';
//import { checkpass } from '@/pages/RoutingCheck';

const checkpass = (routeData = [], pathname) => {
  let pass = false;
  if (!routeData || !routeData.length) return true;
  routeData.forEach(route => {
    if (pathToRegexp(`${route.path}`).exec(pathname)) {
      pass = true;
    } else if (!pass && route.routes) {
      pass = checkpass(route.routes, pathname)
    }
  });
  return pass;
}

function AuthComponent({ children, location, routerData, routerMap }) {
  const { pathname } = location;
  const auth = getAuthority();
  const isLogin = auth && auth[0] !== 'guest';
  const getRouteAuthority = (path, routeData = []) => {
    let authorities;
    routeData.forEach(route => {
      // match prefix
      if (pathToRegexp(`${route.path}(.*)`).test(path)) {
        authorities = route.authority || authorities;

        // get children authority recursively
        if (route.routes) {
          authorities = getRouteAuthority(path, route.routes) || authorities;
        }
      }
    });
    return authorities;
  };
  const baseAuthority = getRouteAuthority(pathname, routerData)
    , baseRouteChecked = checkpass(routerData, pathname)
    , actualAuthority = getRouteAuthority(pathname, routerMap)
    , actualRouteChecked = checkpass(routerMap, pathname);
  return (
    <Authorized
      authority={baseRouteChecked ? baseAuthority : ['notMacth']}
      noMatch={isLogin
        ? <Exception404 />
        : <Redirect to="/user/login" />
      }
    >
      <Authorized
        authority={actualRouteChecked ? actualAuthority : ['notMacth']}
        noMatch={<Exception403 />}
      >
        {children}
      </Authorized>
    </Authorized>
  );
}
export default connect(({ menu }) => ({
  routerData: menu.routerData,
  routerMap: menu.routerMap,
}))(AuthComponent);

但是3.x的写法会导致出现404或者403时会全屏，所以如果是局部应用的话，可以将登录校验、404/403校验分离，将 Routes 分别挂在对应的路由层级上