1.全局初始数据概念参考官网
    https://pro.ant.design/zh-CN/docs/initial-state
    2.关于全局初始数据，我个人是这么理解的
    在app.jsx中通过getInitialState()方法可以初始化很多基础数据，如当前登录用户信息，当前用户有权查看的菜单树等等，getInitialState()方法返回的数据最后会被默认注入到一个 namespace 为 @@initialState 的 model 中。可以通过 useModel 这个 hook 来消费它：

    1. import React from 'react';
    3. import { useModel } from 'umi';
    4. import { Spin } from 'antd';
    6. export default () => {
    7.   const { initialState, loading, refresh, setInitialState } = useModel('@@initialState');
    9.   if (loading) {
    10.     return <Spin />;
    11.   }
    13.   return <div>{initialState.userName}</div>;
    14. };

    image.png
    3.antd pro v5初始化项目中的app.jsx中的getInitialState方法代码如下

    1. export async function getInitialState() {
    2.   const fetchUserInfo = async () => {
    3.     try {
    4.       const msg = await queryCurrentUser();
    5.       return msg.data;
    6.     } catch (error) {
    7.       history.push(loginPath);
    8.     }
    10.     return undefined;
    11.   }; // 如果是登录页面，不执行
    13.   if (history.location.pathname !== loginPath) {
    14.     const currentUser = await fetchUserInfo();
    15.     return {
    16.       fetchUserInfo,
    17.       currentUser,
    18.       settings: {},
    19.     };
    20.   }
    22.   return {
    23.     fetchUserInfo,
    24.     settings: {},
    25.   };
    26. }

    会调用queryCurrentUser()方法获取用户信息currentUser（mock数据），并将currentUser,settings数据放入
    initialState中，initialState是一个对象类型，里面可以接受任何的子对象（后续我们的动态菜单树）也会放入initialState中。
    4.app.jsx中的layout直接消费了initialState，具体代码如下

    1. export const layout = ({ initialState }) => {
    2.   return {
    3.     rightContentRender: () => <RightContent />,
    4.     disableContentMargin: false,
    5.     waterMarkProps: {
    6.       content: initialState?.currentUser?.name,
    7.     },
    8.     footerRender: () => <Footer />,
    9.     onPageChange: () => {
    10.       const { location } = history; // 如果没有登录，重定向到 login
    12.       if (!initialState?.currentUser && location.pathname !== loginPath) {
    13.         history.push(loginPath);
    14.       }
    15.     },
    16.     links: isDev
    17.       ? [
    18.           <Link to="/umi/plugin/openapi" target="_blank">
    19.             <LinkOutlined />
    20.             <span>OpenAPI 文档</span>
    21.           </Link>,
    22.           <Link to="/~docs">
    23.             <BookOutlined />
    24.             <span>业务组件文档</span>
    25.           </Link>,
    26.         ]
    27.       : [],
    28.     menuHeaderRender: undefined,
    29.     // 自定义 403 页面
    30.     // unAccessible: <div>unAccessible</div>,
    31.     ...initialState?.settings,
    32.   };
    33. };

    layout中消费了initialState中的currentUser,如果currentUser无数据且当前不在登录页面，会自动调到登录页，同时这段代码…initialState?.settings,消费了settings。
    5.下面我们利用现有的app.jsx的全局初始数据的逻辑开始实现后台登录效果。