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

    • 2020-02-10 19:56
    • 字数 1,661
    • 阅读 927
    在使用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动态菜单图标显示】
back_to_top