Antd Desgin Pro 保姆级配置教程（二）-一一网

一：清除登录页面

我是用Antd Desgin Pro 框架来做个人博客的，所以我需要清除登录页面，同时清楚401的限制。

mock接口模拟，我们暂时不选择动他。等相关的调用mock的方法都被清空后，就可以看到很多页面有很多的警告，只需要把警告删除，再把mock接口模拟给删除即可

先来到`src/app.tsx` 文件下

    const loginPath = '/user/login';
复制代码

看到这行代码，搜索loginPath在这个页面用到的地方。

1646792396(1).png

在getInitialState方法中，声明了fetchUserInfo方法，可以看到如果这个接口出现错误，代码捕获到错误会强制跳转到登录页面。有兴趣的可以打印一下，这个接口就相当于我们平常业务的获取用户信息的接口，在开发业务中同时也会返回用户的token，如果是企业级项目要用到，可以根据token是否存在来进行强制登录。

在getInitialState，会先进行一个判断，如果是登录接口，不会执行改方法，会把这个方法return 出去，并且return 出去 config/defaultSettings文件暴露出去的配置，为什么要暴露这些东西，后期会详细的分析。

在这里，我们只需要知道getInitialState这个方法，其实就是Antd Desgin Pro 校验用户是否登录的方法。

如果我们不需要登录页面，也不需要校验，可以将这里注释或者删除，就不会进入页面的时候，强制跳转到登录页面啦

其实在业务中，如果用户登录以后，在这个页面停留时间过长，我们该如何提醒用户token失效，重新登录呢，其实在这里，我们发现Antd Desgin Pro 也有体现

1646792804(1).png

我们可以看到，在ProLayout组件的Api中有一个方法，onPageChange页面切换时触发。这里会校验用户token 是否失效，如果失效，强制跳转到登录页面。因为我是用这个来搭建个人博客，所以我都不需要，我就全部注释。有需要的可以再合理安排

二：配置反向代理

`config/proxy.ts`文件

1646792962(1).png

这里官方为我们提前构建了3个不同的环境，开发环境（dev），测试环境（test）,正式环境（pre）

如何启动不同的环境, `package.json`文件scripts

1646793134(1).png

yarn start 默认运行dev环境
yarn run start:dev 运行dev环境
yarn run start:test 运行test环境
yarn run start:pre 运行pre环境

其实最后，配置的全部文件会导入到`config/config.ts`文件下，这个文件的作用，随后会详细分析

1646793613(1).png

三：开发环境自带Dumi文档

首页菜单底部，业务组件文档

1646796085(1).png

点击进入组件文档页面

1646796224(1).png

在`src/app.ts`文件下，我们发现ProLayout的Api 配置跳转了一个路由

1646796329(1).png

展示的文件就是md文件，我们可以看到在根目录下存在一个`README.md`文件，在`src/components`文件下也存在一个`index.md`文件，目前在项目中一共存在2个md文件，所以进入文档模式，看到的内容就是这两个md文件转化的页面

在`src/pages/TableList`新建`index.md`文件，利用md语法，输入这是一个组件的使用说明,刷新页面，可以看到系统已经把我们新建的md文件，渲染到了页面上

1646797083(1).png

这里的语法，配置一些问题可以去看一下dumi的官网介绍

四：路由的一些配置项

先看一下官方给routes进行的类型限制

export interface MenuDataItem {
  /** @name 子菜单 */
  routes?: MenuDataItem[];
  /** @name 在菜单中隐藏子节点 */
  hideChildrenInMenu?: boolean;
  /** @name 在菜单中隐藏自己和子节点 */
  hideInMenu?: boolean;
  /** @name 在面包屑中隐藏 */
  hideInBreadcrumb?: boolean;
  /** @name 菜单的icon */
  icon?: React.ReactNode;
  /** @name 自定义菜单的国际化 key */
  locale?: string | false;
  /** @name 菜单的名字 */
  name?: string;
  /** @name 用于标定选中的值，默认是 path */
  key?: string;
  /** @name disable 菜单选项 */
  disabled?: boolean;
  /** @name 路径,可以设定为网页链接 */
  path?: string;
  /**
   * @deprecated 当此节点被选中的时候也会选中 parentKeys 的节点
   * @name 自定义父节点
   */
  parentKeys?: string[];
  /** @name 隐藏自己，并且将子节点提升到与自己平级 */
  flatMenu?: boolean;
  /** @name 指定外链打开形式，同a标签 */
  target?: string;


  [key: string]: any;
}
复制代码