【图文并茂】ant design pro 如何优雅奇妙地调用个人头像和用户名

本文主要是介绍【图文并茂】ant design pro 如何优雅奇妙地调用个人头像和用户名，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
如上图所示，如果拿到远程的头像和用户名信息呢。

首先肯定是要登录，然后去访问个人信息接口。

我们之前有提到 * 【图文并茂】ant design pro 如何对接后端个人信息接口

这个是基础

接下来我们只要去调到想要的信息就好。

在这里插入图片描述
首先是有头像信息的，也有用户名。

用户名

在这里插入图片描述
src/components/RightContent/AvatarDropdown.tsx

import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { FormattedMessage, history, useModel } from '@umijs/max';
import { Spin } from 'antd';
import { createStyles } from 'antd-style';
import { stringify } from 'querystring';
import React, { useCallback } from 'react';
import { flushSync } from 'react-dom';
import HeaderDropdown from '../HeaderDropdown';export type GlobalHeaderRightProps = {menu?: boolean;children?: React.ReactNode;
};export const AvatarName = () => {const { initialState } = useModel('@@initialState');const { currentUser } = initialState || {};return <span className="anticon">{currentUser?.name}</span>;
};const useStyles = createStyles(({ token }) => {return {action: {display: 'flex',height: '48px',marginLeft: 'auto',overflow: 'hidden',alignItems: 'center',padding: '0 8px',cursor: 'pointer',borderRadius: token.borderRadius,'&:hover': {backgroundColor: token.colorBgTextHover,},},};
});export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, children }) => {/*** 退出登录，并且将当前的 url 保存*/const loginOut = async () => {localStorage.removeItem('token');const { search, pathname } = window.location;const urlParams = new URL(window.location.href).searchParams;/** 此方法会跳转到 redirect 参数所在的位置 */const redirect = urlParams.get('redirect');// Note: There may be security issues, please noteif (window.location.pathname !== '/user/login' && !redirect) {history.replace({pathname: '/user/login',search: stringify({redirect: pathname + search,}),});}};const { styles } = useStyles();const { initialState, setInitialState } = useModel('@@initialState');const onMenuClick = useCallback((event: { key: React.Key }) => {const { key } = event;if (key === 'logout') {flushSync(() => {setInitialState((s) => ({ ...s, currentUser: undefined }));});loginOut().catch(() => console.error);return;}history.push(`/account/${key}`);},[initialState, setInitialState],);const loading = (<span className={styles.action}><Spinsize="small"style={{marginLeft: 8,marginRight: 8,}}/></span>);if (!initialState) {return loading;}const { currentUser } = initialState;if (!currentUser || !currentUser.email) {return loading;}const menuItems = [...(menu? [{key: 'center',icon: <UserOutlined />,label: '个人中心',},{key: 'settings',icon: <SettingOutlined />,label: '个人设置',},{type: 'divider' as const,},]: []),{key: 'change-password',icon: <SettingOutlined />,label: <FormattedMessage id="menu.account.change-password" defaultMessage="修改密码" />,},{key: 'logout',icon: <LogoutOutlined />,label: <FormattedMessage id="menu.account.logout" defaultMessage="退出登录" />,},];return (<HeaderDropdownmenu={{selectedKeys: [],onClick: onMenuClick,items: menuItems,}}>{children}</HeaderDropdown>);
};

在这里插入图片描述
这些判断也蛮重要的，要跟后端的数据对应上。

头像

在这里插入图片描述
头像信息是在这个 src/app.tsx 文件处理的。

    avatarProps: {src: initialState?.currentUser?.avatar,title: <AvatarName />,render: (_, avatarChildren) => {return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;},},

类型

最后是类型信息要跟后端的对上

src/services/ant-design-pro/typings.d.ts

 type CurrentUser = {isAdmin: CurrentUser | undefined;data?: any;name?: string;avatar?: string;role?: string;roles?: any;_id?: string;userid?: string;email?: string;signature?: string;title?: string;group?: string;tags?: { key?: string; label?: string }[];notifyCount?: number;unreadCount?: number;country?: string;access?: string;geographic?: {province?: { label?: string; key?: string };city?: { label?: string; key?: string };};address?: string;phone?: string;};