import React, { useCallback } from 'react'; import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'; import { Avatar, Menu, Spin } from 'antd'; import { history, useModel } from 'umi'; import { outLogin } from '@/services/login'; import { stringify } from 'querystring'; import HeaderDropdown from '../HeaderDropdown'; import styles from './index.less'; export interface GlobalHeaderRightProps { menu?: boolean; } /** * 退出登录,并且将当前的 url 保存 */ const loginOut = async () => { await outLogin(); const { query, pathname } = history.location; const { redirect } = query; // Note: There may be security issues, please note if (window.location.pathname !== '/user/login' && !redirect) { history.replace({ pathname: '/user/login', search: stringify({ redirect: pathname, }), }); } }; const AvatarDropdown: React.FC = ({ menu }) => { const { initialState, setInitialState } = useModel('@@initialState'); const onMenuClick = useCallback( (event: { key: React.Key; keyPath: React.Key[]; item: React.ReactInstance; domEvent: React.MouseEvent; }) => { const { key } = event; if (key === 'logout' && initialState) { setInitialState({ ...initialState, currentUser: undefined }); loginOut(); return; } history.push(`/account/${key}`); }, [], ); const loading = ( ); if (!initialState) { return loading; } const { currentUser } = initialState; if (!currentUser || !currentUser.name) { return loading; } const menuHeaderDropdown = ( {menu && ( 个人中心 )} {menu && ( 个人设置 )} {menu && } 退出登录 ); return ( {currentUser.name} ); }; export default AvatarDropdown;