87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { Provider } from 'react-redux';
|
|
import store from './store';
|
|
import './index.css';
|
|
import { Toaster } from '@/components/ui/toaster.tsx';
|
|
import ErrorBoundary from '@/components/ErrorBoundary';
|
|
import { getCurrentUserMenus } from '@/pages/System/Menu/List/service';
|
|
import { setMenus } from './store/userSlice';
|
|
import App from './App';
|
|
import AppSkeleton from './layouts/components/AppSkeleton';
|
|
|
|
/**
|
|
* 应用启动流程 - 性能优化版本
|
|
*
|
|
* 优化点：
|
|
* 1. 优先使用缓存菜单，快速启动
|
|
* 2. 减少控制台日志输出
|
|
* 3. 使用骨架屏提升体验
|
|
* 4. 登录后刷新页面确保路由正确
|
|
*/
|
|
|
|
const rootElement = document.getElementById('root')!;
|
|
const root = ReactDOM.createRoot(rootElement);
|
|
|
|
// 启动应用
|
|
async function bootstrap() {
|
|
try {
|
|
const token = localStorage.getItem('token');
|
|
|
|
// 如果已登录，预加载菜单数据
|
|
if (token) {
|
|
// 检查 localStorage 中是否有缓存的菜单数据
|
|
const cachedMenus = localStorage.getItem('menus');
|
|
|
|
if (cachedMenus) {
|
|
try {
|
|
const menus = JSON.parse(cachedMenus);
|
|
if (menus && menus.length > 0) {
|
|
// ✅ 优先使用缓存，快速启动
|
|
store.dispatch(setMenus(menus));
|
|
} else {
|
|
throw new Error('缓存菜单为空');
|
|
}
|
|
} catch (error) {
|
|
// 缓存失败，从服务器获取
|
|
const menuData = await getCurrentUserMenus();
|
|
store.dispatch(setMenus(menuData));
|
|
}
|
|
} else {
|
|
// 没有缓存，从服务器获取
|
|
const menuData = await getCurrentUserMenus();
|
|
store.dispatch(setMenus(menuData));
|
|
}
|
|
}
|
|
|
|
// ✅ 渲染应用
|
|
root.render(
|
|
<ErrorBoundary>
|
|
<Provider store={store}>
|
|
<App />
|
|
<Toaster />
|
|
</Provider>
|
|
</ErrorBoundary>
|
|
);
|
|
} catch (error) {
|
|
// 启动失败，清除 token 并渲染应用（会自动跳转到登录页）
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('menus');
|
|
|
|
root.render(
|
|
<ErrorBoundary>
|
|
<Provider store={store}>
|
|
<App />
|
|
<Toaster />
|
|
</Provider>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|
|
}
|
|
|
|
// 显示骨架屏（更好的视觉体验）
|
|
root.render(<AppSkeleton />);
|
|
|
|
// 启动应用
|
|
bootstrap();
|