use umi conventional routing

config/config.js

@@ -1,6 +1,5 @@
 // https://umijs.org/config/
 import os from 'os';
-import pageRoutes from './router.config';
 import webpackPlugin from './plugin.config';
 import defaultSettings from '../src/defaultSettings';
 import slash from 'slash2';
@@ -21,6 +20,11 @@ const plugins = [
         default: 'zh-CN', // default zh-CN
         baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
       },
+      routes: {
+        update(routes) {
+          return [...require('../src/pages/_routes'), ...routes];
+        },
+      },
       dynamicImport: {
         loadingComponent: './components/PageLoading/index',
         webpackChunkName: true,
@@ -45,6 +49,18 @@ const plugins = [
         : {}),
     },
   ],
+  [
+    'umi-plugin-authorize',
+    {
+      authorize: [
+        {
+          guard: ['src/pages/Auth'],
+          include: /\//,
+          exclude: /\/user/i,
+        },
+      ],
+    },
+  ],
 ];
 
 // 针对 preview.pro.ant.design 的 GA 统计代码
@@ -69,7 +85,7 @@ export default {
     ie: 11,
   },
   // 路由配置
-  routes: pageRoutes,
+  // routes: pageRoutes,
   // Theme for antd
   // https://ant.design/docs/react/customize-theme-cn
   theme: {

mock/route.js

@@ -2,4 +2,196 @@ export default {
   '/api/auth_routes': {
     '/form/advanced-form': { authority: ['admin', 'user'] },
   },
+  '/api/menus': {
+    routes: [
+      // dashboard
+      {
+        path: '/dashboard',
+        name: 'dashboard',
+        icon: 'dashboard',
+        routes: [
+          {
+            path: '/dashboard/analysis',
+            name: 'analysis',
+          },
+          {
+            path: '/dashboard/monitor',
+            name: 'monitor',
+          },
+          {
+            path: '/dashboard/workplace',
+            name: 'workplace',
+          },
+        ],
+      },
+      // forms
+      {
+        path: '/forms',
+        icon: 'form',
+        name: 'form',
+        routes: [
+          {
+            path: '/forms/basicform',
+            name: 'basicform',
+          },
+          {
+            path: '/forms/stepform',
+            name: 'stepform',
+            hideChildrenInMenu: true,
+            routes: [
+              {
+                path: '/forms/stepform/info',
+                name: 'info',
+              },
+              {
+                path: '/forms/stepform/confirm',
+                name: 'confirm',
+              },
+              {
+                path: '/forms/stepform/result',
+                name: 'result',
+              },
+            ],
+          },
+          {
+            path: '/forms/advancedform',
+            name: 'advancedform',
+            authority: ['admin'],
+          },
+        ],
+      },
+      // list
+      {
+        path: '/list',
+        icon: 'table',
+        name: 'list',
+        routes: [
+          {
+            path: '/list/tablelist',
+            name: 'searchtable',
+          },
+          {
+            path: '/list/basiclist',
+            name: 'basiclist',
+          },
+          {
+            path: '/list/cardlist',
+            name: 'cardlist',
+          },
+          {
+            path: '/list/search',
+            name: 'searchlist',
+            routes: [
+              {
+                path: '/list/search/articles',
+                name: 'articles',
+              },
+              {
+                path: '/list/search/projects',
+                name: 'projects',
+              },
+              {
+                path: '/list/search/applications',
+                name: 'applications',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/profile',
+        name: 'profile',
+        icon: 'profile',
+        routes: [
+          // profile
+          {
+            path: '/profile/basicprofile',
+            name: 'basic',
+          },
+          {
+            path: '/profile/advancedprofile',
+            name: 'advanced',
+          },
+        ],
+      },
+      {
+        name: 'result',
+        icon: 'check-circle-o',
+        path: '/result',
+        routes: [
+          // result
+          {
+            path: '/result/success',
+            name: 'success',
+          },
+          { path: '/result/fail', name: 'fail' },
+        ],
+      },
+      {
+        name: 'exception',
+        icon: 'warning',
+        path: '/exception',
+        routes: [
+          // exception
+          {
+            path: '/exception/403',
+            name: 'not-permission',
+          },
+          {
+            path: '/exception/404',
+            name: 'not-find',
+          },
+          {
+            path: '/exception/500',
+            name: 'server-error',
+          },
+          {
+            path: '/exception/trigger',
+            name: 'trigger',
+            hideInMenu: true,
+          },
+        ],
+      },
+      {
+        name: 'account',
+        icon: 'user',
+        path: '/account',
+        routes: [
+          {
+            path: '/account/center',
+            name: 'center',
+            routes: [
+              {
+                path: '/account/center/articles',
+              },
+              {
+                path: '/account/center/applications',
+              },
+              {
+                path: '/account/center/projects',
+              },
+            ],
+          },
+          {
+            path: '/account/settings',
+            name: 'settings',
+            routes: [
+              {
+                path: '/account/settings/baseview',
+              },
+              {
+                path: '/account/settings/security',
+              },
+              {
+                path: '/account/settings/binding',
+              },
+              {
+                path: '/account/settings/notification',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
 };

package.json

@@ -58,7 +58,8 @@
     "react-dom": "^16.7.0",
     "react-fittext": "^1.0.0",
     "react-media": "^1.9.2",
-    "react-router-dom": "^4.3.1"
+    "react-router-dom": "^4.3.1",
+    "umi-plugin-authorize": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "^16.8.1",

src/layouts/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import BasicLayout from './BasicLayout';
+import UserLayout from './UserLayout';
+
+export default props => {
+  const { location } = props;
+  const { pathname } = location;
+  if (/\/user/i.test(pathname)) {
+    return <UserLayout {...props} />;
+  }
+  return <BasicLayout {...props} />;
+};

src/models/menu.js

@@ -3,6 +3,7 @@ import isEqual from 'lodash/isEqual';
 import { formatMessage } from 'umi/locale';
 import Authorized from '@/utils/Authorized';
 import { menu } from '../defaultSettings';
+import { queryMenu } from '@/services/user';
 
 const { check } = Authorized;
 
@@ -97,17 +98,18 @@ export default {
 
   state: {
     menuData: [],
+    routerData: [],
     breadcrumbNameMap: {},
   },
 
   effects: {
-    *getMenuData({ payload }, { put }) {
-      const { routes, authority } = payload;
+    *getMenuData(_, { put, call }) {
+      const { routes, authority } = yield call(queryMenu);
       const menuData = filterMenuData(memoizeOneFormatter(routes, authority));
       const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);
       yield put({
         type: 'save',
-        payload: { menuData, breadcrumbNameMap },
+        payload: { menuData, breadcrumbNameMap, routerData: routes },
       });
     },
   },

src/pages/Account/Center/Applications.js

@@ -3,7 +3,7 @@ import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd';
 import numeral from 'numeral';
 import { connect } from 'dva';
 import { formatWan } from '@/utils/utils';
-import stylesApplications from '../../List/Applications.less';
+import stylesApplications from '../../List/Search/Applications.less';
 
 @connect(({ list }) => ({
   list,

src/pages/Account/Center/Projects.js

@@ -3,7 +3,7 @@ import { List, Card } from 'antd';
 import moment from 'moment';
 import { connect } from 'dva';
 import AvatarList from '@/components/AvatarList';
-import stylesProjects from '../../List/Projects.less';
+import stylesProjects from '../../List/Search/Projects.less';
 
 @connect(({ list }) => ({
   list,

src/pages/Account/Settings/Info.js → src/pages/Account/Settings/_layout.js

@@ -16,14 +16,16 @@ class Info extends Component {
     super(props);
     const { match, location } = props;
     const menuMap = {
-      base: <FormattedMessage id="app.settings.menuMap.basic" defaultMessage="Basic Settings" />,
-      security: (
+      baseview: (
+        <FormattedMessage id="app.settings.menuMap.basic" defaultMessage="Basic Settings" />
+      ),
+      securityview: (
         <FormattedMessage id="app.settings.menuMap.security" defaultMessage="Security Settings" />
       ),
-      binding: (
+      bindingview: (
         <FormattedMessage id="app.settings.menuMap.binding" defaultMessage="Account Binding" />
       ),
-      notification: (
+      notificationview: (
         <FormattedMessage
           id="app.settings.menuMap.notification"
           defaultMessage="New Message Notification"

src/pages/Auth.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import pathToRegexp from 'path-to-regexp';
+import Authorized from '@/utils/Authorized';
+import Exception403 from './Exception/403';
+
+export default ({ children, location }) => {
+  /* eslint-disable no-underscore-dangle */
+  const { routerData } = window.g_app._store.getState().menu;
+  const getRouteAuthority = (pathname, routeData) => {
+    const routes = routeData.slice(); // clone
+
+    const getAuthority = (routeDatas, path) => {
+      let authorities;
+      routeDatas.forEach(route => {
+        // check partial route
+        if (pathToRegexp(`${route.path}(.*)`).test(path)) {
+          if (route.authority) {
+            authorities = route.authority;
+          }
+          // is exact route?
+          if (!pathToRegexp(route.path).test(path) && route.routes) {
+            authorities = getAuthority(route.routes, path);
+          }
+        }
+      });
+      return authorities;
+    };
+
+    return getAuthority(routes, pathname);
+  };
+
+  return (
+    <Authorized
+      authority={getRouteAuthority(location.pathname, routerData)}
+      noMatch={<Exception403 />}
+    >
+      {children}
+    </Authorized>
+  );
+};

src/pages/Forms/StepForm/Step2.js → src/pages/Forms/StepForm/Confirm.js

@@ -24,7 +24,7 @@ class Step2 extends React.PureComponent {
     const { form, data, dispatch, submitting } = this.props;
     const { getFieldDecorator, validateFields } = form;
     const onPrev = () => {
-      router.push('/form/step-form/info');
+      router.push('/forms/stepform/info');
     };
     const onValidateForm = e => {
       e.preventDefault();

src/pages/Forms/StepForm/Step1.js → src/pages/Forms/StepForm/Info.js

@@ -30,7 +30,7 @@ class Step1 extends React.PureComponent {
             type: 'form/saveStepFormData',
             payload: values,
           });
-          router.push('/form/step-form/confirm');
+          router.push('/forms/stepform/confirm');
         }
       });
     };