Ant Design Pro 4.0从服务器请求菜单

在使用Ant Design Pro 4.0进行React开发时，需要从服务器请求菜单，官方文档【从服务器请求菜单】也作了简单的说明，但对于初学者来说还是不够详细。本文简要记录修改过程。

1.在services文件夹创建menu.ts

import request from '@/utils/request';

export async function queryMenu() {
    const token = sessionStorage.getItem('access_token');
    return request(`/api/menu`, {
      method: 'GET',
      headers: { Authorization: `Bearer ${token}` },
    });
  }

2.修改BasicLayout.tsx文件

（1）导入useState及queryMenu：

import React, { useEffect, useState } from 'react';
import { queryMenu } from '@/services/menu';

（2）定义menuData：

const [menuData, setMenuData] = useState([]);

（3）在useEffect中获取菜单数据：

useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }

    queryMenu().then(data => {
      setMenuData(data || []);
    });
  }, []);

（4）修改菜单数据：

menuDataRender={() => menuData}

上述服务请求使用了access_token，根据实际情况修改，即可使用mock数据进行测试。菜单数据格式按官方文档说明即可。

3.菜单图标显示

如需显示菜单图标，请移步【Ant Design Pro 4.0动态菜单图标显示】