antd pro学习记录

antd pro是一个后台模板，但上手之后还是有种劝退的感觉，要读懂代码还是得花点功夫。

把区块装好会自动生成路由对象，启动项目后为什么会重定向到/user/login？

routes: [
    {
      path: '/',
      component: '../layouts/BlankLayout',
      routes: [
        {
          path: '/user',
          component: '../layouts/UserLayout',
          routes: [
            {
              path: '/user',
              redirect: '/user/login',
            },
            {
              name: 'login',
              path: '/user/login',
              component: './user/login',
            },
            {
              name: 'register-result',
              path: '/user/register-result',
              component: './user/register-result',
            },
            {
              name: 'register',
              path: '/user/register',
              component: './user/register',
            },
            {
              component: '404',
            },
          ],
        },
        {
          path: '/',
          component: '../layouts/BasicLayout',
          Routes: ['src/pages/Authorized'],
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/dashboard',
              name: 'dashboard',
              icon: 'dashboard',
              routes: [
                {
                  name: 'analysis',
                  path: '/dashboard/analysis',
                  component: './dashboard/analysis',
                },
                {
                  name: 'monitor',
                  path: '/dashboard/monitor',
                  component: './dashboard/monitor',
                },
                {
                  name: 'workplace',
                  path: '/dashboard/workplace',
                  component: './dashboard/workplace',
                },
              ],
            },
            {
              path: '/form',
              icon: 'form',
              name: 'form',
              routes: [
                {
                  name: 'basic-form',
                  path: '/form/basic-form',
                  component: './form/basic-form',
                },
                {
                  name: 'step-form',
                  path: '/form/step-form',
                  component: './form/step-form',
                },
                {
                  name: 'advanced-form',
                  path: '/form/advanced-form',
                  component: './form/advanced-form',
                },
              ],
            },
            {
              path: '/list',
              icon: 'table',
              name: 'list',
              routes: [
                {
                  path: '/list/search',
                  name: 'search-list',
                  component: './list/search',
                  routes: [
                    {
                      path: '/list/search',
                      redirect: '/list/search/articles',
                    },
                  ],
                },
                {
                  name: 'table-list',
                  path: '/list/table-list',
                  component: './list/table-list',
                },
                {
                  name: 'basic-list',
                  path: '/list/basic-list',
                  component: './list/basic-list',
                },
              ],
            },
            {
              path: '/profile',
              name: 'profile',
              icon: 'profile',
              routes: [],
            },
            {
              name: 'result',
              icon: 'check-circle-o',
              path: '/result',
              routes: [],
            },
            {
              name: 'exception',
              icon: 'warning',
              path: '/exception',
              routes: [],
            },
            {
              name: 'account',
              icon: 'user',
              path: '/account',
              routes: [],
            },
            {
              name: 'editor',
              icon: 'highlight',
              path: '/editor',
              routes: [],
            },
            {
              path: '/',
              redirect: '/dashboard/analysis',
              authority: ['admin', 'user'],
            },
            {
              component: '404',
            },
          ],
        },
      ],
    },
  ],

可以看到自动生成的route是一个多层嵌套路由。
根路径指向了BlankLayout这个组件作为公共模板，又指向了BasicLayout组件。

path: '/',
component: '../layouts/BasicLayout',
Routes: ['src/pages/Authorized'],
authority: ['admin', 'user'],

当匹配到这个路由的时候，用到了umiJs的路由权限，会走到Authorized这个组件，这时会判断是否登陆，未登录会跳转到
/user/login这个组件。

antd pro /umiJs 怎么设置环境变量

antd pro：
找到config.js复制里面内容
创建config.dev.js和config.prod.js然后黏贴config.js里的内容，然后定义各自的环境变量

define: {
        "process.env":{
            port:3000
        }
    },

然后改一下 package.json 里的命令：cross-env UMI_ENV=development umi dev