umi+dev+Ant Desing Pro v5+React + Hooks 服务器获取动态权限菜单

app.tsx代码
app.tsx 代码直接复制修改测试就可以,
如果菜单名不一样,可以在

https://beta-pro.ant.design/docs/advanced-menu-cn

配置国际化---------------------------------------高级菜单连接(↑)----------------------------------------------

import type {
     BasicLayoutProps, Settings as LayoutSettings } from '@ant-design/pro-layout';
import {
     PageLoading } from '@ant-design/pro-layout';
import type {
     RunTimeLayoutConfig } from 'umi';
import {
     history, Link } from 'umi';
import RightContent from '@/components/RightContent';
import Footer from '@/components/Footer';
import {
     currentUser as queryCurrentUser, queryMenus } from './services/ant-design-pro/api';
import {
     BookOutlined, LinkOutlined } from '@ant-design/icons';
import type {
    MenuDataItem} from '@ant-design/pro-layout'let menuList = [{
    path: '/user',layout: false,routes: [{
    path: '/user',routes: [{
    name: 'login',path: '/user/login',component: './user/Login',},],},{
    component: './404',},],},{
    path: '/welcome',name: 'welcome',icon: 'smile',component: './Welcome',},{
    path: '/admin',name: 'admin',icon: 'crown',access: 'canAdmin',component: './Admin',routes: [{
    path: '/admin/sub-page',name: 'sub-page',icon: 'smile',component: './Welcome',},{
    component: './404',},],},{
    name: 'list.table-list',icon: 'table',path: '/list',component: './TableList',},{
    path: '/',redirect: '/welcome',},{
    component: './404',},
]const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/user/login';/** 获取用户信息比较慢的时候会展示一个 loading */
export const initialStateConfig = {
    loading: <PageLoading />,
};/*** @see https://umijs.org/zh-CN/plugins/plugin-initial-state* */
export async function getInitialState(): Promise<{
    settings?: Partial<LayoutSettings>;menuData:MenuDataItem[];currentUser?: API.CurrentUser;fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
    const fetchUserInfo = async () => {
    try {
    const msg = await queryCurrentUser();return msg.data;} catch (error) {
    history.push(loginPath);}return undefined;};const queryMenuData = async () => {
    try {
    // const menu = await queryCurrentUser();const {
    data} = await queryCurrentUser();return data;// return menu.data;} catch (error) {
    //history.push(loginPath);}return undefined;};// 如果是登录页面，不执行if (history.location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();const menuData = menuList; //queryMenus();console.log(menuData)return {
    fetchUserInfo,currentUser,menuData,settings: {
    },};}return {
    fetchUserInfo,menuData:[],settings: {
    },};
}// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout = ({
     initialState }:{
    initialState:{
    settings?: LayoutSettings; menuData:MenuDataItem[];currentUser?:API.CurrentUser}
}):BasicLayoutProps => {
    return {
    rightContentRender: () => <RightContent />,disableContentMargin: false,footerRender: () => <Footer />,onPageChange: () => {
    const {
    currentUser} = initialState;const {
     location } = history;// 如果没有登录，重定向到 loginif (!initialState?.currentUser && location.pathname !== loginPath) {
    history.push(loginPath);}},menuHeaderRender: undefined,menuDataRender:(menuData)=> initialState.menuData || menuData,...initialState?.settings,};
};

api.ts

// @ts-ignore
/* eslint-disable */
import {
     request } from 'umi';/** 获取当前的用户 GET /api/currentUser */
export async function currentUser(options?: {
     [key: string]: any }) {
    return request<{
    data: API.CurrentUser;}>('/api/currentUser', {
    method: 'GET',...(options || {
    }),});
}/** 退出登录接口 POST /api/login/outLogin */
export async function outLogin(options?: {
     [key: string]: any }) {
    return request<Record<string, any>>('/api/login/outLogin', {
    method: 'POST',...(options || {
    }),});
}/** 登录接口 POST /api/login/account */
export async function login(body: API.LoginParams, options?: {
     [key: string]: any }) {
    return request<API.LoginResult>('/api/login/account', {
    method: 'POST',headers: {
    'Content-Type': 'application/json',},data: body,...(options || {
    }),});
}/** 此处后端没有提供注释 GET /api/notices */
export async function getNotices(options?: {
     [key: string]: any }) {
    return request<API.NoticeIconList>('/api/notices', {
    method: 'GET',...(options || {
    }),});
}/** 获取规则列表 GET /api/rule */
export async function rule(params: {
    // query/** 当前的页码 */current?: number;/** 页面的容量 */pageSize?: number;},options?: {
     [key: string]: any },
) {
    return request<API.RuleList>('/api/rule', {
    method: 'GET',params: {
    ...params,},...(options || {
    }),});
}/** 新建规则 PUT /api/rule */
export async function updateRule(options?: {
     [key: string]: any }) {
    return request<API.RuleListItem>('/api/rule', {
    method: 'PUT',...(options || {
    }),});
}/** 新建规则 POST /api/rule */
export async function addRule(options?: {
     [key: string]: any }) {
    return request<API.RuleListItem>('/api/rule', {
    method: 'POST',...(options || {
    }),});
}/** 删除规则 DELETE /api/rule */
export async function removeRule(options?: {
     [key: string]: any }) {
    return request<Record<string, any>>('/api/rule', {
    method: 'DELETE',...(options || {
    }),});
}/** 权限菜单获取后台的方法 */
export async function queryMenus(){
    return request<API.CurrentUser>('/admin/menus/fetch');
}