ant design pro 配置动态菜单、权限

import React, { Suspense } from 'react';
import { Layout } from 'antd';
import DocumentTitle from 'react-document-title';
import isEqual from 'lodash/isEqual';
import memoizeOne from 'memoize-one';
import { connect } from 'dva';
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
import pathToRegexp from 'path-to-regexp';
import Media from 'react-media';
import { formatMessage } from 'umi/locale';
import Authorized from '@/utils/Authorized';
import logo from '../assets/logo.svg';
import Footer from './Footer';
import Header from './Header';
import Context from './MenuContext';
import Exception403 from '../pages/Exception/403';
import PageLoading from '@/components/PageLoading';
import SiderMenu from '@/components/SiderMenu';

import styles from './BasicLayout.less';

// lazy load SettingDrawer
const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer'));

const { Content } = Layout;

const query = {
'screen-xs': {
maxWidth: 575,
},
'screen-sm': {
minWidth: 576,
maxWidth: 767,
},
'screen-md': {
minWidth: 768,
maxWidth: 991,
},
'screen-lg': {
minWidth: 992,
maxWidth: 1199,
},
'screen-xl': {
minWidth: 1200,
maxWidth: 1599,
},
'screen-xxl': {
minWidth: 1600,
},
};

class BasicLayout extends React.PureComponent {
constructor(props) {
super(props);
this.getPageTitle = memoizeOne(this.getPageTitle);
this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
}

componentDidMount() {
const {
dispatch,
route: { routes, authority },
} = this.props;
dispatch({
type: 'user/fetchCurrent',
});
dispatch({
type: 'setting/getSetting',
});
dispatch({
type: 'menu/getMenuData',
payload: { routes, authority },
});
}

componentDidUpdate(preProps) {
// After changing to phone mode,
// if collapsed is true, you need to click twice to display
const { collapsed, isMobile } = this.props;
if (isMobile && !preProps.isMobile && !collapsed) {
this.handleMenuCollapse(false);
}
}

getContext() {
const { location, breadcrumbNameMap } = this.props;
return {
location,
breadcrumbNameMap,
};
}

matchParamsPath = (pathname, breadcrumbNameMap) => {
const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
return breadcrumbNameMap[pathKey];
};

getRouterAuthority = (pathname, routeData) => {
let routeAuthority = ['noAuthority'];
if (typeof routeData === 'undefined') {
return '';
}
const getAuthority = (key, routes) => {
routes.map(route => {
if (route.path && pathToRegexp(route.path).test(key)) {
routeAuthority = route.authority;
} else if (route.routes) {
routeAuthority = getAuthority(key, route.routes);
}
return route;
});
return routeAuthority;
};
return getAuthority(pathname, routeData);
};

getPageTitle = (pathname, breadcrumbNameMap) => {
const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);

if (!currRouterData) {
  return 'Ant Design Pro';
}
const pageName = formatMessage({
  id: currRouterData.locale || currRouterData.name,
  defaultMessage: currRouterData.name,
});

return `${pageName} - Ant Design Pro`;

};

getLayoutStyle = () => {
const { fixSiderbar, isMobile, collapsed, layout } = this.props;
if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
return {
paddingLeft: collapsed ? '80px' : '256px',
};
}
return null;
};

handleMenuCollapse = collapsed => {
const { dispatch } = this.props;
dispatch({
type: 'global/changeLayoutCollapsed',
payload: collapsed,
});
};

renderSettingDrawer = () => {
// Do not render SettingDrawer in production
// unless it is deployed in preview.pro.ant.design as demo
if (process.env.NODE_ENV === 'production' && APP_TYPE !== 'site') {
return null;
}
return ;
};

render() {
const {
navTheme,
layout: PropsLayout,
children,
location: { pathname },
isMobile,
routeData,
menuData,
breadcrumbNameMap,
fixedHeader,
} = this.props;
const isTop = PropsLayout === 'topmenu';
// const routerConfig = this.getRouterAuthority(pathname, routes);
// 修改,根据服务器权限重新生成的路由
const routerConfig = this.getRouterAuthority(pathname, routeData);
const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
const layout = (

{isTop && !isMobile ? null : (
<SiderMenu
logo={logo}
theme={navTheme}
onCollapse={this.handleMenuCollapse}
menuData={menuData}
isMobile={isMobile}
{...this.props}
/>
)}
<Layout
style={{
...this.getLayoutStyle(),
minHeight: '100vh',
}}
>
<Header
menuData={menuData}
handleMenuCollapse={this.handleMenuCollapse}
logo={logo}
isMobile={isMobile}
{...this.props}
/>

}>
{children}

);
return (
<React.Fragment>
<DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}>

{params => (
<Context.Provider value={this.getContext()}>

{layout}

</Context.Provider>
)}


}>{this.renderSettingDrawer()}
</React.Fragment>
);
}
}

export default connect(({ global, setting, menu }) => ({
collapsed: global.collapsed,
layout: setting.layout,
routeData: menu.routeData,
menuData: menu.menuData,
breadcrumbNameMap: menu.breadcrumbNameMap,
...setting,
}))(props => (

{isMobile => <BasicLayout {...props} isMobile={isMobile} />}

));