ccic-web/packages/component.app/src/App.js

import React, {lazy, useState} from 'react';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import zhCN from 'antd/es/locale/zh_CN';
import { ConfigProvider, Result } from 'antd';
import { useRequest } from 'ahooks';
import { getPath, UserMenuContext, analysisTree } from './utils';
import { setStorage, logoutOut } from '@component/utils';
import Layout from './layout';
import { isEmpty, last, includes, map } from 'lodash';
import { getUserInfo } from 'userContext';
import routes from 'routes';

export default () => {
	const location = useLocation();
	const navigate = useNavigate();
	const { loading, data = {} } = useRequest(getUserInfo, {
		onSuccess({ userInfo, menu }) {
			if (userInfo) {
				setStorage(userInfo);
			}
			if (isEmpty(userInfo)) {
				navigate('/404');
				return null;
			}

			if (isEmpty(menu)) {
				navigate('/404');
				return null;
			} else {
				const paths = location.pathname.split('/');
				const item = last(paths);
				if (item === 'app') {
					const path = getPath(menu);
					navigate(path, {
						replace: true,
					});
				}
			}
		},
		onError(ERROR) {
			console.log(ERROR, 'ERROR');
			logoutOut(navigate, 'logoutOut');
		},
	});

	if (loading) {
		return null;
	}

	const menuPath = analysisTree(data.menu, 'path');

	const authRoutes = routes.filter((item) =>
		includes(menuPath, '/app/' + item.auth),
	);

	return (
		<UserMenuContext.Provider value={data}>
			<ConfigProvider locale={zhCN}>
				<Routes>
					<Route path="/" element={<Layout />}>
						{authRoutes.map((item) => (
							<Route key={item.path} path={item.path} element={item.element} />
						))}
					</Route>
					<Route path="*" element={<Result status="404" title="404" />}></Route>
				</Routes>
			</ConfigProvider>
		</UserMenuContext.Provider>
	);
};