antd pro v5 登录流程

涉及的主要文件

.
├── mock    
    ├── user.ts    
└── src
    ├── pages.tsx
        ├── user 
            ├── login
                ├── index.tsx
    ├── app.tsx

未登录时，路由跳转到登录界面

非登陆界面

// 非登陆界面  ======>
### src/app.tsx ###########################
// 如果不是登录页面，执行
  if (history.location.pathname !== '/user/login') {
    const currentUser = await fetchUserInfo();  // 1. 通过fetchUserInfo访问mock的api判断是否登录了（这里是通过后台access参数验证的，后面有描述）
    const menuData = await fetchMenu();

    return {
      fetchUserInfo,
      currentUser,
      menuData,
      settings: defaultSettings,
    };
  }

### src/app.tsx ###########################
// fetchUserInfo 具体请求
const fetchUserInfo = async () => {
    try {
      const currentUser = await queryCurrent();  // 2. fetchUserInfo具体请求api判断是否登录了
      return currentUser;
    } catch (error) {                           
      history.push('/user/login');               // 5. 401状态抛出异常，跳转到登录界面
    }
    return undefined;
  };

### mock/user.ts ###########################
// 请求数据返回
const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
let access = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ? 'admin' : '';

const getAccess = () => {
  return access;
};
......
if (!getAccess()) {                              // 3. 判断access是否登录，此时的 access 为''
      res.status(401).send({                     // 4. 返回401状态 
        data: {
          isLogin: false,
        },
        errorCode: '401',
        errorMessage: '请先登录！',
        success: true,
      });
      return;
    }

登录界面

// 登录界面 =======>
### src/user/login/index.tsx###########################
 // 登录
const msg = await fakeAccountLogin({ ...values, type });    // 1. 登录请求

### mock/user.ts ###########################
 // 数据请求返回
if (password === 'ant.design' && username === 'admin') {
      res.send({                                            // 2. 返回数据
        status: 'ok',
        type,
        currentAuthority: 'admin',
      });
      access = 'admin';                                     // 3. 将access参数赋值为 'adimin'
      return;
 }

### src/user/login/index.tsx###########################
if (msg.status === 'ok' && initialState) {
    message.success('登录成功！');
    const currentUser = await initialState?.fetchUserInfo();  // 4. 与非登陆界面操作一样，使用fetchUserInfo函数请求后台，判断是否为登录（即判断access参数，此时为'admin'）
    setInitialState({
          ...initialState,
          currentUser,                                      // 5. 返回数据写入全局变量
    });
    replaceGoto();                                          // 6. 跳转进入后台管理界面
    return;
}