1、getSelectedMenuKeys 獲取選中的選單的key

  getSelectedMenuKeys = () => {
    const {location: {pathname}} = this.props;
    return getMeunMatchKeys(this.flatMenuKeys, urlToList(pathname));
  };

   getSelectedMenuKeys中涉及到getMeunMatchKeys()、this.flatMenuKeys、urlToList()，下邊分別對其進行分析。

this.flatMenuKeys = getFlatMenuKeys(props.menuData);
.....
export
 
 const getFlatMenuKeys = menu =>
  menu.reduce((keys, item) => {
    keys.push(item.path);
    if (item.children) {
      return keys.concat(getFlatMenuKeys(item.children));
    }
    return keys;
  }, []);

  getFlatMenuKeys通過對props.menuData資料遞迴呼叫，返回props.menuData中所有層級資料的path值（Array型別），其中path為完整的路徑值（getMenuData()已處理過）

export function urlToList(url) {
  //filter(i => i) 去除空
  const urllist = url.split('/').filter(i => i);
  return urllist.map((urlItem, index) => {
    return `/${urllist.slice(0, index + 1).join('/')}`;
  });
}

  將pathname傳入到urlToList方法中，urlToList首先對url用’/’分割，filter方法對空值進行處理（分割後第一個元素為空）。返回一級路徑、二級路徑…依次類推。例如當前pathname為/A/B時，則返回[‘/A’,’/A/B’]

export const getMeunMatchKeys = (flatMenuKeys, paths) =>
  paths.reduce((matchKeys, path) => (
    matchKeys.concat(
      flatMenuKeys.filter(item => pathToRegexp(item).test(path))
    )), []);

  getMeunMatchKeys對flatMenuKeys、paths做雙重迴圈，其中pathToRegexp會對/path/:id等資料做處理，會匹配/path路徑。返回值為，flatMenuKeys中包含的paths元素（返回型別Array）。

  綜上所述，getFlatMenuKeys返回當前路由的pathname對應在flatMenuKeys中匹配項。例如當前pathname=’/dashboard/analysis’(有效路由)，則返回[‘/dashboard’,’/dashboard/analysis’]；當前pathname=’/aaa’(無效路由)，則返回[]，因為flatMenuKeys找不到匹配項。

2、handleOpenChange 切換選單時，更改選中的選單key

isMainMenu = key => {
    return this.menus.some(item => key && (item.key === key || item.path === key));
};

handleOpenChange = openKeys => {
    const lastOpenKey = openKeys[openKeys.length - 1];
    const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;

    this.setState({
      openKeys: moreThanOne ? [lastOpenKey] : [...openKeys],
    });
};

......
//Menu元件中onOpenChange事件
onOpenChange={this.handleOpenChange}

   isMainMenu用來檢測當前路徑是否為一級選單路徑。

   由ant design中的Menu元件可知，onOpenChange事件的回撥方法中，傳入引數openKeys為當前多級路徑、將被開啟的路徑的集合。

1. 如果當前路徑、即將開啟的路徑是一級選單間切換，則moreThanOne必為true，例如當前’/dashboard/analysis’，即將開啟’/list’，此時openKeys為[‘/dashboard’,’/dashboard/analysis’,’/list’]，則openKeys為即將開啟的頁面的路由，即/list’;

2. 如果是當前選單的子選單開啟，則moreThanOne為false，例如當前開啟的選單時’/list’(列表項)，即將開啟’/list/search’(搜尋列表)，則openKeys為[“/list”, “/list/search”],此時Menu元件會開啟：列表-搜尋列表；

3. 如果，點選當前開啟的選單，則此時即為關閉選單，openKeys為[]。

  *注：結合getSelectedMenuKeys、handleOpenChange。對selectedKeys做了如下處理：如果根據當前路由資訊找不到匹配的選單項，則當前選中的選單項為解決要開啟的選單項。*

let selectedKeys = this.getSelectedMenuKeys();
if (!selectedKeys.length) {
  selectedKeys = [openKeys[openKeys.length - 1]];
}

3、getNavMenuItems 、getSubMenuOrItem獲取選單項入口方法

  getNavMenuItems獲取存在選單名稱(name)、且可見的選單(!item.hideInMenu)。其中getSubMenuOrItem根據當前的是否存在子選單返回或者

  getNavMenuItems = menusData => {
    if (!menusData) {
      return [];
    }
    return menusData
      .filter(item => item.name && !item.hideInMenu)
      .map(item => {
        // make dom
        const ItemDom = this.getSubMenuOrItem(item);
        return this.checkPermissionItem(item.authority, ItemDom);
      })
      .filter(item => item);
  };

 getSubMenuOrItem = item => {
    if (item.children && item.children.some(child => child.name)) {
      const childrenItems = this.getNavMenuItems(item.children);

      if (childrenItems && childrenItems.length > 0) {
        return (
          <SubMenu
            title={
              item.icon ? (
                <span>
                  {getIcon(item.icon)}
                  <span>{item.name}</span>
                </span>
              ) : (
                item.name
              )
            }
            key={item.path}
          >
            {childrenItems}
          </SubMenu>
        );
      }
      return null;
    } else {
      return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
    }
  };

  第一次呼叫getSubMenuOrItem方法，

 <Menu>
 ......
  {this.getNavMenuItems(this.menus)}
</Menu>

有如下邏輯，遍及選單資料（一級選單）：
1. 如果當前選單資料（item），不存在子選單或者子選單中不存在name屬性時，則判斷為當前選單項沒有子選單，返回Menu.Item；此時代表一級選單沒有子選單，則返回的Menu.Item直接作為

1. 如果當前選單資料存在子選單，則對子選單呼叫getNavMenuItems方法，此處存在遞迴呼叫getSubMenuOrItem。繼續執行1、2。當前子選單如果沒有下一級子選單，則返回SubMenu - Menu.Item - SubMenu，如果存在繼續遞迴呼叫。此時一級選單已經確定含有子選單，所以遞迴的結果是作為SubMenu的子元素，當然SubMenu中也有可能包含SubMenu。

4、checkPermissionItem 獲取當前選單的許可權

• 方法使用：

const ItemDom = this.getSubMenuOrItem(item);
return this.checkPermissionItem(item.authority, ItemDom);

• 方法引用

  checkPermissionItem = (authority, ItemDom) => {
    if (this.props.Authorized && this.props.Authorized.check) {
      const {check} = this.props.Authorized;
      return check(authority, ItemDom);
    }
    return ItemDom;
  };

   由getSubMenuOrItem返回的是SubMenu或者Menu.Item元件，checkPermissionItem方法中的Authorized屬性是元件，由ant design pro 程式碼學習(一) —– 路由分析分析可知，this.props.Authorized.check() 接受三個引數：1、元件的許可權值；2、鑑權通過返回的元件；3、鑑權不通過返回的元件。方法內部會根據當前許可權值authority與currentAuthority對比，決定返回值。

   由menuData中的資料可知，當前選單資料中，除了賬戶（user）的authority為’guest’，其他均為undefined。而當前的許可權值currentAuthority是根據呼叫介面’/api/login/account’來確定的（具體在後續登入部分在分析）登入後不為’guest’（具體根據賬號型別為admin或者user）。

   check()中當傳入的authority為undefined時，則直接認為是鑑權通過。由於賬戶（user）相關的許可權為guest，不等於’admin’,此時返回undefined(因為鑑權未通過的元件引數未傳入)。getNavMenuItems()方法中通過Array.filter過濾掉undefined、null、‘’ 等元素。否則的話根據react官方文件api可知，在jsx中undefined會被渲染為空

false，null，undefined，和 true 都是有效的的 children(子元素) 。但是並不會被渲染。 —– react文件-深入 JSX

5、getMenuItemPath 生成選單項

   根據選單資料中的path屬性，判斷是否含有https，如果有，則認為是連結，生成a標籤，如果沒有則認為系統內部頁面，則生成Link標籤。getIcon用於生成選單圖示 。

 getMenuItemPath = item => {
    const itemPath = this.conversionPath(item.path);
    const icon = getIcon(item.icon);
    const {target, name} = item;
    // Is it a http link
    if (/^https?:\/\//.test(itemPath)) {
      return (
        <a href={itemPath} target={target}>
          {icon}
          <span>{name}</span>
        </a>
      );
    }
    return (
      <Link
        to={itemPath}
        target={target}
        replace={itemPath === this.props.location.pathname}
        onClick={
          this.props.isMobile
            ? () => {
              this.props.onCollapse(true);
            }
            : undefined
        }
      >
        {icon}
        <span>{name}</span>
      </Link>
    );
  };

6、選單資料流程圖