详解ant-design-pro使用qiankun微服务

qiankun: {
    slave: {},
  }

let isMenu = true // 设置一个变量,判断是否需要展示layout
// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  console.log(initialState)
  const prop = {}
  if (!isMenu) { // 如果是加载在主应用中,不展示菜单和头部
    prop.menuRender = false
    prop.headerRender = false
    prop.contentStyle = { margin: 0 }

  }
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    footerRender: () => <Footer />,
    headerContentRender: () => <ProBreadcrumb />,
    breadcrumbRender: (routers = []) => [
      {
        path: '/',
        breadcrumbName: '主页',
      },
      ...routers,
    ],
    onPageChange: () => {
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    },
    links: isDev
      ? [
          <Link to="/umi/plugin/openapi" target="_blank">
            <LinkOutlined />
            <span>OpenAPI 文档</span>
          </Link>,
          <Link to="/~docs">
            <BookOutlined />
            <span>业务组件文档</span>
          </Link>,
        ]
      : [],
    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    ...prop,
    ...initialState?.settings,
  };
};

export const qiankun = {
  // 应用加载之前
  async bootstrap(props: any) {
    console.log('app1 bootstrap', props);
    if (props) {
      isMenu = props.isMenu
      const logins = async() => {
        await login({ ...props.accountInfo })
      }
      logins()
    }
  },
  // 应用 render 之前触发
  async mount(props: any) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props: any) {
    console.log('app1 unmount', props);
  },
}

...
{
    name: 'Form表单',
    icon: 'form',
    path: '/form',
    routes: [
      {
        path: '/form',
        redirect: '/form/add'
      },
      {
        name: 'form表单',
        icon: 'table',
        path: '/form/add',
        component: './product/addProduct',
      },
      {
        name: 'debonceselect',
        icon: 'table',
        path: '/form/debonceselect',
        component: './form/debounce',
      },
      {
        name: 'upload上传',
        icon: 'table',
        path: '/form/upload',
        component: './form/upload',
      },
      {
        name: 'child详情页',
        icon: 'table',
        path: '/form/detail', // 主应用配置时路由要和子应用一致
        component: './form/detail',
      },
      {
        name: 'child详情页2',
        icon: 'table',
        path: '/form/detail2',
        component: './form/detail2',
      }
    ],
  },

export default {
  dev: {
    '/childapi/api/': {
      target: 'http://localhost:8091',
      changeOrigin: true,
      pathRewrite: { '^/childapi': '' },
    },
  },
  test: {
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

let token = ''
const middleware: OnionMiddleware = async (ctx, next) => {
  const {
    req: { url },
  } = ctx

  ctx.req.options.headers = { // 在请求头加入传递的token
    token,
  }
  await next()
  if (ctx.res.responseCode !== '000000') {
    if (!(ctx.res && ctx.res.size)) throw { ...ctx.res, url }
}
export const qiankun = {
  // 应用加载之前
  async bootstrap(props: any) {
    if (props) {
      token = props.token
    }
  },
  // 应用 render 之前触发
  async mount(props: any) {
    console.log('app1 mount', props)
  // 应用卸载之后触发
  async unmount(props: any) {
    console.log('app1 unmount', props)
export const request: RequestConfig = {
  prefix: URL_PREFIX,
  method: 'POST',
  middlewares: [middleware],
  credentials: 'include',
  errorHandler,

export const qiankun = {
  // 应用加载之前
  async bootstrap(props: any) {
    console.log('app1 bootstrap', props);
    if (props) {
      isMenu = props.isMenu
      const logins = async() => { // 调用登录接口
        await login({ ...props.accountInfo }) // 传递账户信息过来
      }
      logins()
    }
  },
  // 应用 render 之前触发
  async mount(props: any) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props: any) {
    console.log('app1 unmount', props);
  },
}