95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Link, useIntl, connect, history } from 'umi';
|
|
import { Dropdown, Button, Modal } from 'antd';
|
|
import { DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
|
|
import type { ConnectProps, Dispatch } from 'umi';
|
|
import type { UserModelState } from '@/models/user';
|
|
import { message } from 'antd';
|
|
|
|
interface PageProps extends ConnectProps {
|
|
user: UserModelState; // dva model状态
|
|
dispatch: Dispatch; // dva dispatch方法
|
|
}
|
|
const User: React.FC<PageProps> = ({ user, dispatch }) => {
|
|
|
|
|
|
const intl = useIntl();
|
|
useEffect(() => {
|
|
if (!user.userInfo) {
|
|
const userinfoStr = sessionStorage.getItem('Userinfo');
|
|
if (userinfoStr) {
|
|
try {
|
|
const userInfo = JSON.parse(userinfoStr);
|
|
dispatch({
|
|
type: 'user/saveUserInfo',
|
|
payload: userInfo,
|
|
});
|
|
} catch (e) {
|
|
// 解析失败时可以报错提示
|
|
console.error('Userinfo 解析失败', e);
|
|
}
|
|
}
|
|
} else if (user.token) {
|
|
dispatch({
|
|
type: 'user/fetchUserInfo',
|
|
});
|
|
}
|
|
}, [user.token]);
|
|
const handleMenuClick = (e: any) => {
|
|
if (e.key === 'logout') {
|
|
Modal.confirm({
|
|
title: '确定退出登录吗？',
|
|
icon: <ExclamationCircleOutlined />,
|
|
content: '退出登录后，您将需要重新登录',
|
|
onOk() {
|
|
dispatch({
|
|
type: 'user/logout',
|
|
}).then(() => {
|
|
sessionStorage.clear();
|
|
message.success('退出登录成功');
|
|
history.push('/login');
|
|
});
|
|
},
|
|
onCancel() {
|
|
return;
|
|
},
|
|
});
|
|
} else if(e.key === 'profile') {
|
|
console.log(111);
|
|
|
|
// history.push('/profile');
|
|
}
|
|
};
|
|
return (
|
|
<div className="user">
|
|
{user.userInfo?.fullName ? (
|
|
<Dropdown
|
|
trigger={['hover']}
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: 'profile',
|
|
label: '个人中心',
|
|
},
|
|
{
|
|
key: 'logout',
|
|
label: '退出登录',
|
|
},
|
|
],
|
|
onClick: handleMenuClick,
|
|
}}
|
|
>
|
|
<Button type="link">
|
|
{`${user.userInfo?.fullName}`}
|
|
<DownOutlined />
|
|
</Button>
|
|
</Dropdown>
|
|
) : (
|
|
<Link to={'/login'}>{intl.formatMessage({ id: '登录' })}</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect(({ user }: { user: UserModelState }) => ({ user }))(User);
|