zksu
/
WEB
forked from yoone/WEB
1
0
Fork 0
WEB/src/app.tsx

129 lines
3.3 KiB
TypeScript

// 运行时配置
import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import {
ProLayoutProps,
ProSchemaValueEnumObj,
ProTable,
} from '@ant-design/pro-components';
import { RequestConfig, history, useModel } from '@umijs/max';
import { App, Avatar, ConfigProvider, Dropdown, MenuProps } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { usercontrollerGetuser } from './servers/api/user';
// 设置 dayjs 全局语言为中文
dayjs.locale('zh-cn');
// 全局初始化数据配置,用于 Layout 用户信息和权限初始化
// 更多信息见文档:https://umijs.org/docs/api/runtime-config#getinitialstate
export async function getInitialState(): Promise<{
user?: Record<string, any>;
categoryList?: ProSchemaValueEnumObj;
sites?: API.SiteConfig[];
}> {
if (!localStorage.getItem('token') || history.location.pathname === '/login')
return {};
const { data: user } = await usercontrollerGetuser();
return { user };
}
export const layout = (): ProLayoutProps => {
const { initialState } = useModel('@@initialState');
const items: MenuProps['items'] = [
{
key: '1',
label: '我的账号',
disabled: true,
},
{
type: 'divider',
},
{
key: '3',
label: '退出登录',
icon: <LogoutOutlined />,
onClick: async () => {
//TODO 清理服务器登陆状态
localStorage.removeItem('token');
history.push('/login');
},
},
];
return {
menu: {
locale: false,
},
layout: 'mix',
actionsRender: () => (
<Dropdown key="avatar" menu={{ items }}>
<div style={{ cursor: 'pointer' }}>
<Avatar size="large" icon={<UserOutlined />} />
<span style={{ marginLeft: 8 }}>{initialState?.name}</span>
</div>
</Dropdown>
),
};
};
export const request: RequestConfig = {
baseURL: UMI_APP_API_URL,
requestInterceptors: [
(url: string, options: any) => {
const token = localStorage.getItem('token');
return {
url,
options: {
...options,
headers: {
...options.headers,
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
},
};
},
],
errorConfig: {
errorHandler: (error: any) => {
if (error?.response?.status === 401) {
localStorage.removeItem('token');
history.push('/login');
}
},
},
};
export const onRouteChange = ({ location }: { location: Location }) => {
const token = localStorage.getItem('token');
// 白名单,不需要登录的页面
const whiteList = ['/login', '/track'];
if (!token && !whiteList.includes(location.pathname)) {
// 没有 token 且不在白名单内,跳转到登录页
history.push('/login');
}
};
export function rootContainer(container: React.ReactNode) {
// 全局过滤空字段逻辑
(ProTable as any).defaultProps = {
...(ProTable as any).defaultProps,
beforeSearchSubmit: (params: any) => {
return Object.fromEntries(
Object.entries(params).filter(
([_, value]) => value !== undefined && value !== null && value !== '',
),
);
},
};
return (
<ConfigProvider>
<App>{container}</App>
</ConfigProvider>
);
}