🐛 fix: ant-design#2964 and fix 403page no work when refresh the page (a…

…nt-design#2983)

* 🐛 fix: ant-design#2964 and fix 403page no work when refresh the page

* 🐛 add getPageAuthority

* 当访问的路由都不在菜单内时，直接过滤掉会有其他问题

src/layouts/BasicLayout.js

@@ -52,8 +52,6 @@ class BasicLayout extends React.PureComponent {
  constructor(props) {
  super(props);
  this.getPageTitle = memoizeOne(this.getPageTitle);
- this.getBreadcrumbNameMap = memoizeOne(this.getBreadcrumbNameMap, isEqual);
- this.breadcrumbNameMap = this.getBreadcrumbNameMap();
  this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
  }
 
@@ -77,18 +75,17 @@ class BasicLayout extends React.PureComponent {
  componentDidUpdate(preProps) {
  // After changing to phone mode,
  // if collapsed is true, you need to click twice to display
- this.breadcrumbNameMap = this.getBreadcrumbNameMap();
  const { collapsed, isMobile } = this.props;
  if (isMobile && !preProps.isMobile && !collapsed) {
  this.handleMenuCollapse(false);
  }
  }
 
  getContext() {
- const { location } = this.props;
+ const { location, breadcrumbNameMap } = this.props;
  return {
  location,
- breadcrumbNameMap: this.breadcrumbNameMap,
+ breadcrumbNameMap,
  };
  }
 
@@ -112,15 +109,13 @@ class BasicLayout extends React.PureComponent {
  return routerMap;
  }
 
- matchParamsPath = pathname => {
- const pathKey = Object.keys(this.breadcrumbNameMap).find(key =>
- pathToRegexp(key).test(pathname)
- );
- return this.breadcrumbNameMap[pathKey];
+ matchParamsPath = (pathname, breadcrumbNameMap) => {
+ const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
+ return breadcrumbNameMap[pathKey];
  };
 
- getPageTitle = pathname => {
- const currRouterData = this.matchParamsPath(pathname);
+ getPageTitle = (pathname, breadcrumbNameMap) => {
+ const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);
 
  if (!currRouterData) {
  return 'Ant Design Pro';
@@ -129,6 +124,7 @@ class BasicLayout extends React.PureComponent {
  id: currRouterData.locale || currRouterData.name,
  defaultMessage: currRouterData.name,
  });
+
  return `${pageName} - Ant Design Pro`;
  };
 
@@ -175,9 +171,11 @@ class BasicLayout extends React.PureComponent {
  location: { pathname },
  isMobile,
  menuData,
+ breadcrumbNameMap,
  } = this.props;
+
  const isTop = PropsLayout === 'topmenu';
- const routerConfig = this.matchParamsPath(pathname);
+ const routerConfig = this.matchParamsPath(pathname, breadcrumbNameMap);
  const layout = (
  <Layout>
  {isTop && !isMobile ? null : (
@@ -217,7 +215,7 @@ class BasicLayout extends React.PureComponent {
  );
  return (
  <React.Fragment>
- <DocumentTitle title={this.getPageTitle(pathname)}>
+ <DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}>
  <ContainerQuery query={query}>
  {params => (
  <Context.Provider value={this.getContext()}>
@@ -236,6 +234,7 @@ export default connect(({ global, setting, menu }) => ({
  collapsed: global.collapsed,
  layout: setting.layout,
  menuData: menu.menuData,
+ breadcrumbNameMap: menu.breadcrumbNameMap,
  ...setting,
 }))(props => (
  <Media query="(max-width: 599px)">

src/models/menu.js

@@ -70,20 +70,44 @@ const filterMenuData = menuData => {
  })
  .filter(item => item);
 };
+/**
+ * 获取面包屑映射
+ * @param {Object} menuData 菜单配置
+ */
+const getBreadcrumbNameMap = menuData => {
+ const routerMap = {};
+
+ const flattenMenuData = data => {
+ data.forEach(menuItem => {
+ if (menuItem.children) {
+ flattenMenuData(menuItem.children);
+ }
+ // Reduce memory usage
+ routerMap[menuItem.path] = menuItem;
+ });
+ };
+ flattenMenuData(menuData);
+ return routerMap;
+};
+
+const memoizeOneGetBreadcrumbNameMap = memoizeOne(getBreadcrumbNameMap, isEqual);
 
 export default {
  namespace: 'menu',
 
  state: {
  menuData: [],
+ breadcrumbNameMap: {},
  },
 
  effects: {
  *getMenuData({ payload }, { put }) {
  const { routes, authority } = payload;
+ const menuData = filterMenuData(memoizeOneFormatter(routes, authority));
+ const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);
  yield put({
  type: 'save',
- payload: filterMenuData(memoizeOneFormatter(routes, authority)),
+ payload: { menuData, breadcrumbNameMap },
  });
  },
  },
@@ -92,7 +116,7 @@ export default {
  save(state, action) {
  return {
  ...state,
- menuData: action.payload,
+ ...action.payload,
  };
  },
  },