三步掌握！Ant Design Pro动态控制Footer显示的实用技巧

三步掌握！Ant Design Pro动态控制Footer显示的实用技巧

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro

你是否还在为Ant Design Pro项目中Footer（页脚）的固定显示而烦恼？想实现登录页隐藏、首页显示，或者根据用户角色动态调整Footer内容？本文将通过三个简单步骤，教你轻松掌握Footer组件的动态控制技巧，让页面布局更加灵活专业。

一、认识Footer组件基础结构

Ant Design Pro项目的Footer组件默认定义在src/components/Footer/index.tsx文件中，使用ProComponents提供的DefaultFooter组件实现基础布局：

import { DefaultFooter } from '@ant-design/pro-components';
import React from 'react';

const Footer: React.FC = () => {
  return (
    <DefaultFooter
      style={{ background: 'none' }}
      copyright="Powered by Ant Desgin"
      links={[
        { key: 'Ant Design Pro', title: 'Ant Design Pro', href: 'https://pro.ant.design', blankTarget: true },
        { key: 'github', title: <GithubOutlined />, href: 'https://github.com/ant-design/ant-design-pro', blankTarget: true },
      ]}
    />
  );
};

这个基础实现存在两个局限：一是固定显示在所有页面，二是内容无法根据页面或用户状态动态调整。

二、实现基于路由的显示控制

通过修改src/app.tsx中的布局配置，我们可以根据当前路由动态决定是否渲染Footer。ProLayout提供的footerRender属性支持条件渲染逻辑：

// src/app.tsx 中 layout 配置
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    // 其他配置...
    footerRender: () => {
      const { location } = history;
      // 定义不需要显示Footer的路由列表
      const noFooterRoutes = ['/user/login', '/404', '/403'];
      // 路由不在排除列表中时显示Footer
      if (!noFooterRoutes.includes(location.pathname)) {
        return <Footer />;
      }
      return null; // 不显示Footer
    },
  };
};

这段代码通过history.location.pathname获取当前页面路径，与预设的noFooterRoutes数组比对，实现登录页（/user/login）、404页等特殊页面自动隐藏Footer的效果。

三、高级：结合用户权限的动态内容控制

进一步优化Footer组件，使其能根据用户角色显示不同内容。修改src/components/Footer/index.tsx，接收currentUser属性：

// 增强Footer组件支持用户属性
const Footer: React.FC<{ currentUser?: API.CurrentUser }> = ({ currentUser }) => {
  // 根据用户角色生成不同链接
  const getDynamicLinks = () => {
    const baseLinks = [
      { key: 'Ant Design Pro', title: 'Ant Design Pro', href: 'https://pro.ant.design', blankTarget: true }
    ];
    
    // 管理员用户显示额外链接
    if (currentUser?.roles?.includes('admin')) {
      return [
        ...baseLinks,
        { key: 'admin-link', title: '管理后台', href: '/admin', blankTarget: false }
      ];
    }
    return baseLinks;
  };

  return (
    <DefaultFooter
      style={{ background: 'none' }}
      copyright={currentUser ? `©${new Date().getFullYear()} ${currentUser.name}` : 'Powered by Ant Desgin'}
      links={getDynamicLinks()}
    />
  );
};

然后在src/app.tsx中传递用户信息：

footerRender: () => {
  const { location } = history;
  const noFooterRoutes = ['/user/login', '/404', '/403'];
  if (!noFooterRoutes.includes(location.pathname)) {
    // 传递当前用户信息给Footer
    return <Footer currentUser={initialState?.currentUser} />;
  }
  return null;
}

这种实现使Footer能：

• 显示当前登录用户名（currentUser.name）
• 管理员用户额外显示"管理后台"链接
• 未登录状态显示默认版权信息

四、完整实现流程图

通过这三个步骤，我们实现了从基础路由控制到高级权限适配的完整Footer动态控制方案。这种方法保持了组件的可复用性，同时满足不同页面和用户场景的展示需求。完整代码可参考项目中的src/app.tsx布局配置和src/components/Footer/index.tsx组件实现。

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro