admin/src/layouts/AuthLayout/index.jsx

import React, { useEffect, useRef, useMemo, useState } from 'react';
import { Layout, Spin } from 'antd';
import { useLocation, Outlet } from "react-router-dom";
import { useModel } from '@/store';
import { getMenuItems } from '@/routes/menus';
import useRoute from '@/utils/hooks/useRoute';
import RequireLogin from './components/RequireLogin';
import SiderBar from './components/SiderBar';
import Header from './components/Header';
import Container from './components/Container';
import HtmlTitle from './components/HtmlTitle';

import './style.less';

export default (props) => {
  const { theme } = useModel('system');
  const { user, menus } = useModel('user');
  const location = useLocation();
  const { meta } = useRoute() || {};
  const { noLayout = false, noSiderBar = false, noFooter = false } = meta || {};

  const splitMenus = useMemo(() => menus.map(x => ({ ...x, children: undefined })), [menus]);
  const siderMenus = useMemo(() => {
    const target = menus.filter(x => location.pathname.indexOf(x.key) === 0)[0];
    return target ? target.children :  [];
  }, [menus, location.pathname]);

  return (
    <Spin spinning={!user} size="large">
      <HtmlTitle />
      <RequireLogin>
        {
          noLayout
            ? <Outlet />
            : (
              <Layout style={{ minHeight: '100vh' }}>
                <Header theme={theme} menus={splitMenus} location={location} />
                <Layout>
                  { !noSiderBar && <SiderBar theme={theme} menus={siderMenus} location={location} /> }
                  <Container location={location} noFooter={noFooter} />
                </Layout>
              </Layout>
            )
        }
      </RequireLogin>
    </Spin>
  );
}