ant design pro v5 从服务器端加载菜单
import React from 'react'; import { BasicLayoutProps, Settings as LayoutSettings, MenuDataItem } from '@ant-design/pro-layout'; import { notification } from 'antd'; import { history, RequestConfig } from 'umi'; import RightContent from '@/components/RightContent'; import Footer from '@/components/Footer'; import { ResponseError } from 'umi-request'; import { queryCurrent, getMenuList } from './services/xms'; import defaultSettings from '../config/defaultSettings'; import { SmileOutlined, HeartOutlined } from '@ant-design/icons'; const IconMap = { SmileOutlined: <SmileOutlined />, HeartOutlined: <HeartOutlined />, }; export async function getInitialState(): Promise<{ settings?: LayoutSettings; currentUser?: API.CurrentUser; menu: MenuDataItem[]; fetchUserInfo: () => Promise<API.CurrentUser | undefined>; }> { const fetchUserInfo = async () => { try { const currentUser = await queryCurrent(); return currentUser; } catch (error) { history.push('/user/login'); } return undefined; }; // 如果是登录页面,不执行 if (history.location.pathname !== '/user/login') { const currentUser = await fetchUserInfo(); const menuData = await getMenuList(currentUser?.userid || ''); return { fetchUserInfo, currentUser, settings: defaultSettings, menu: menuData, }; } return { fetchUserInfo, settings: defaultSettings, menu: [], }; } const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] => ( menus.map(({ icon, children, ...item }) => { return { ...item, icon: icon && IconMap[icon as string], children: children && loopMenuItem(children), } }) ); export const layout = ({ initialState, }: { initialState: { settings?: LayoutSettings; currentUser?: API.CurrentUser; menu: MenuDataItem[]; }; }): BasicLayoutProps => { return { menuDataRender: () => loopMenuItem(initialState.menu), rightContentRender: () => <RightContent />, disableContentMargin: false, footerRender: () => <Footer />, onPageChange: () => { const { currentUser } = initialState; const { location } = history; // 如果没有登录,重定向到 login if (!currentUser && location.pathname !== '/user/login') { history.push('/user/login'); } }, menuHeaderRender: undefined, ...initialState?.settings, }; }; const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队(异步任务)。', 204: '删除数据成功。', 400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。', 401: '用户没有权限(令牌、用户名、密码错误)。', 403: '用户得到授权,但是访问是被禁止的。', 404: '发出的请求针对的是不存在的记录,服务器没有进行操作。', 405: '请求方法不被允许。', 406: '请求的格式不可得。', 410: '请求的资源被永久删除,且不会再得到的。', 422: '当创建一个对象时,发生一个验证错误。', 500: '服务器发生错误,请检查服务器。', 502: '网关错误。', 503: '服务不可用,服务器暂时过载或维护。', 504: '网关超时。', }; /** * 异常处理程序 */ const errorHandler = (error: ResponseError) => { const { response } = error; if (response && response.status) { const errorText = codeMessage[response.status] || response.statusText; const { status, url } = response; notification.error({ message: `请求错误 ${status}: ${url}`, description: errorText, }); } if (!response) { notification.error({ description: '您的网络发生异常,无法连接服务器', message: '网络异常', }); } throw error; }; export const request: RequestConfig = { errorHandler, };
__EOF__
作 者:码农搞事情
出 处:https://www.cnblogs.com/fmp/p/13830696.html
关于博主:一本正经写程序&不务正业搞事情
版权声明:欢迎分享,转载请注明出处。
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?