Optimization : add router.config.js

config/config.js

@@ -1,9 +1,8 @@
 /* eslint-disable react/destructuring-assignment */
 
 // https://umijs.org/config/
-
+const pageRoutes = require('./router.config');
 const path = require('path');
-// const pageRoutes = require('../_routes');
 
 export default {
   // add for transfer to umi
@@ -28,182 +27,7 @@ export default {
     antd: true, // use antd, default is true
   },
   // 路由配置
-  routes: [
-    // user
-    {
-      path: '/user',
-      component: './layouts/UserLayout',
-      routes: [
-        { path: '/user', redirect: '/user/login' },
-        { path: '/user/login', component: '/User/Login' },
-        { path: '/user/register', component: './User/Register' },
-        { path: '/user/register-result', component: './User/RegisterResult' },
-      ],
-    },
-    // app
-    {
-      path: '/',
-      component: './layouts/LoadingPage',
-      routes: [
-        // dashboard
-        { path: '/', redirect: '/dashboard/analysis' },
-        {
-          path: '/dashboard',
-          name: 'dashboard',
-          icon: 'dashboard',
-          routes: [
-            { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
-            { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
-            { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
-          ],
-        },
-        // forms
-        {
-          path: '/form',
-          icon: 'form',
-          name: 'form',
-          routes: [
-            { path: '/form/basic-form', name: 'basicform', component: './Forms/BasicForm' },
-            {
-              path: '/form/step-form',
-              name: 'stepform',
-              component: './Forms/StepForm',
-              hideChildren: true,
-              routes: [
-                { path: '/form/step-form', name: 'stepform', redirect: '/form/step-form/info' },
-                { path: '/form/step-form/info', name: 'info', component: './Forms/StepForm/Step1' },
-                {
-                  path: '/form/step-form/confirm',
-                  name: 'confirm',
-                  component: './Forms/StepForm/Step2',
-                },
-                {
-                  path: '/form/step-form/result',
-                  name: 'result',
-                  component: './Forms/StepForm/Step3',
-                },
-              ],
-            },
-            {
-              path: '/form/advanced-form',
-              name: 'advancedform',
-              component: './Forms/AdvancedForm',
-            },
-          ],
-        },
-        // list
-        {
-          path: '/list',
-          icon: 'table',
-          name: 'list',
-          routes: [
-            { path: '/list/table-list', name: 'searchtable', component: './List/TableList' },
-            { path: '/list/basic-list', name: 'basiclist', component: './List/BasicList' },
-            { path: '/list/card-list', name: 'cardlist', component: './List/CardList' },
-            {
-              path: '/list/search',
-              name: 'searchlist',
-              component: './List/List',
-              routes: [
-                { path: '/list/search/articles', name: 'articles', component: './List/Articles' },
-                { path: '/list/search/projects', name: 'projects', component: './List/Projects' },
-                {
-                  path: '/list/search/applications',
-                  name: 'applications',
-                  component: './List/Applications',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          path: '/profile',
-          name: 'profile',
-          icon: 'profile',
-          routes: [
-            // profile
-            { path: '/profile/basic', name: 'basic', component: './Profile/BasicProfile' },
-            { path: '/profile/advanced', name: 'advanced', component: './Profile/AdvancedProfile' },
-          ],
-        },
-        {
-          name: 'result',
-          icon: 'check-circle-o',
-          path: '/result',
-          routes: [
-            // result
-            { path: '/result/success', name: 'success', component: './Result/Success' },
-            { path: '/result/fail', name: 'fail', component: './Result/Error' },
-          ],
-        },
-        {
-          name: 'exception',
-          icon: 'warning',
-          path: '/exception',
-          routes: [
-            // exception
-            { path: '/exception/403', name: 'not-permission', component: './Exception/403' },
-            { path: '/exception/404', name: 'not-find', component: './Exception/404' },
-            { path: '/exception/500', name: 'server-error', component: './Exception/500' },
-            {
-              path: '/exception/trigger',
-              name: 'trigger',
-              hideInMenu: true,
-              component: './Exception/triggerException',
-            },
-          ],
-        },
-        {
-          name: 'account',
-          icon: 'user',
-          path: '/account',
-          routes: [
-            {
-              path: '/account/center',
-              name: 'center',
-              component: './Account/Center/Center',
-              routes: [
-                { path: '/account/center', redirect: '/account/center/articles' },
-                {
-                  path: '/account/center/articles',
-                  component: './Account/Center/Articles',
-                },
-                {
-                  path: '/account/center/applications',
-                  component: './Account/Center/Applications',
-                },
-                {
-                  path: '/account/center/projects',
-                  component: './Account/Center/Projects',
-                },
-              ],
-            },
-            {
-              path: '/account/settings',
-              name: 'settings',
-              component: './Account/Settings/Info',
-              routes: [
-                { path: '/account/settings', redirect: '/account/settings/base' },
-                {
-                  path: '/account/settings/base',
-                  component: './Account/Settings/BaseView',
-                },
-                {
-                  path: '/account/settings/security',
-                  component: './Account/Settings/SecurityView',
-                },
-                { path: '/account/settings/binding', component: './Account/Settings/BindingView' },
-                {
-                  path: '/account/settings/notification',
-                  component: './Account/Settings/NotificationView',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
+  routes: pageRoutes,
 
   theme: {
     'card-actions-background': '#f5f8fa',

config/router.config.js

@@ -0,0 +1,176 @@
+module.exports = [
+  // user
+  {
+    path: '/user',
+    component: './layouts/UserLayout',
+    routes: [
+      { path: '/user', redirect: '/user/login' },
+      { path: '/user/login', component: '/User/Login' },
+      { path: '/user/register', component: './User/Register' },
+      { path: '/user/register-result', component: './User/RegisterResult' },
+    ],
+  },
+  // app
+  {
+    path: '/',
+    component: './layouts/LoadingPage',
+    routes: [
+      // dashboard
+      { path: '/', redirect: '/dashboard/analysis' },
+      {
+        path: '/dashboard',
+        name: 'dashboard',
+        icon: 'dashboard',
+        routes: [
+          { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
+          { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
+          { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
+        ],
+      },
+      // forms
+      {
+        path: '/form',
+        icon: 'form',
+        name: 'form',
+        routes: [
+          { path: '/form/basic-form', name: 'basicform', component: './Forms/BasicForm' },
+          {
+            path: '/form/step-form',
+            name: 'stepform',
+            component: './Forms/StepForm',
+            hideChildren: true,
+            routes: [
+              { path: '/form/step-form', name: 'stepform', redirect: '/form/step-form/info' },
+              { path: '/form/step-form/info', name: 'info', component: './Forms/StepForm/Step1' },
+              {
+                path: '/form/step-form/confirm',
+                name: 'confirm',
+                component: './Forms/StepForm/Step2',
+              },
+              {
+                path: '/form/step-form/result',
+                name: 'result',
+                component: './Forms/StepForm/Step3',
+              },
+            ],
+          },
+          {
+            path: '/form/advanced-form',
+            name: 'advancedform',
+            component: './Forms/AdvancedForm',
+          },
+        ],
+      },
+      // list
+      {
+        path: '/list',
+        icon: 'table',
+        name: 'list',
+        routes: [
+          { path: '/list/table-list', name: 'searchtable', component: './List/TableList' },
+          { path: '/list/basic-list', name: 'basiclist', component: './List/BasicList' },
+          { path: '/list/card-list', name: 'cardlist', component: './List/CardList' },
+          {
+            path: '/list/search',
+            name: 'searchlist',
+            component: './List/List',
+            routes: [
+              { path: '/list/search/articles', name: 'articles', component: './List/Articles' },
+              { path: '/list/search/projects', name: 'projects', component: './List/Projects' },
+              {
+                path: '/list/search/applications',
+                name: 'applications',
+                component: './List/Applications',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/profile',
+        name: 'profile',
+        icon: 'profile',
+        routes: [
+          // profile
+          { path: '/profile/basic', name: 'basic', component: './Profile/BasicProfile' },
+          { path: '/profile/advanced', name: 'advanced', component: './Profile/AdvancedProfile' },
+        ],
+      },
+      {
+        name: 'result',
+        icon: 'check-circle-o',
+        path: '/result',
+        routes: [
+          // result
+          { path: '/result/success', name: 'success', component: './Result/Success' },
+          { path: '/result/fail', name: 'fail', component: './Result/Error' },
+        ],
+      },
+      {
+        name: 'exception',
+        icon: 'warning',
+        path: '/exception',
+        routes: [
+          // exception
+          { path: '/exception/403', name: 'not-permission', component: './Exception/403' },
+          { path: '/exception/404', name: 'not-find', component: './Exception/404' },
+          { path: '/exception/500', name: 'server-error', component: './Exception/500' },
+          {
+            path: '/exception/trigger',
+            name: 'trigger',
+            hideInMenu: true,
+            component: './Exception/triggerException',
+          },
+        ],
+      },
+      {
+        name: 'account',
+        icon: 'user',
+        path: '/account',
+        routes: [
+          {
+            path: '/account/center',
+            name: 'center',
+            component: './Account/Center/Center',
+            routes: [
+              { path: '/account/center', redirect: '/account/center/articles' },
+              {
+                path: '/account/center/articles',
+                component: './Account/Center/Articles',
+              },
+              {
+                path: '/account/center/applications',
+                component: './Account/Center/Applications',
+              },
+              {
+                path: '/account/center/projects',
+                component: './Account/Center/Projects',
+              },
+            ],
+          },
+          {
+            path: '/account/settings',
+            name: 'settings',
+            component: './Account/Settings/Info',
+            routes: [
+              { path: '/account/settings', redirect: '/account/settings/base' },
+              {
+                path: '/account/settings/base',
+                component: './Account/Settings/BaseView',
+              },
+              {
+                path: '/account/settings/security',
+                component: './Account/Settings/SecurityView',
+              },
+              { path: '/account/settings/binding', component: './Account/Settings/BindingView' },
+              {
+                path: '/account/settings/notification',
+                component: './Account/Settings/NotificationView',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

src/pages/layouts/LoadingPage.js

@@ -4,8 +4,7 @@ import { connect } from 'dva';
 import { enquireScreen, unenquireScreen } from 'enquire-js';
 import BasicLayout from './BasicLayout';
 // TODO: should use this.props.routes
-import config from '../../../config/config';
-const menuData = config['routes'];
+import routerConfig from '../../../config/router.config';
 
 // Conversion router to menu.
 function formatter(data, parentPath = '', parentAuthority, parentName) {
@@ -35,27 +34,7 @@ function formatter(data, parentPath = '', parentAuthority, parentName) {
 /**
  * 根据菜单取得重定向地址.
  */
-const MenuData = formatter(menuData[1].routes);
-const routerData = config.routes;
-const getRedirectData = () => {
-  const redirectData = [];
-  const getRedirect = item => {
-    if (item && item.children) {
-      if (item.children[0] && item.children[0].path) {
-        redirectData.push({
-          from: `${item.path}`,
-          to: `${item.children[0].path}`,
-        });
-        item.children.forEach(children => {
-          getRedirect(children);
-        });
-      }
-    }
-  };
-  MenuData.forEach(getRedirect);
-  return redirectData;
-};
-const redirectData = getRedirectData();
+const MenuData = formatter(routerConfig[1].routes);
 
 class LoadingPage extends PureComponent {
   state = {
@@ -121,8 +100,8 @@ class LoadingPage extends PureComponent {
       <BasicLayout
         isMobile={isMobile}
         menuData={MenuData}
-        routerData={routerData}
-        redirectData={redirectData}
+        routerData={routerConfig}
+        redirectData={[]}
         {...this.props}
       />
     );

src/utils/authority.js

@@ -1,8 +1,17 @@
 // use localStorage to store the authority info, which might be sent from server in actual project.
 export function getAuthority() {
   // return localStorage.getItem('antd-pro-authority') || ['admin', 'user'];
-  const authority = localStorage.getItem('antd-pro-authority');
-  return authority ? JSON.parse(authority) : 'admin';
+  let authority = localStorage.getItem('antd-pro-authority');
+  if (authority) {
+    if (authority.includes('[')) {
+      authority = JSON.parse(authority);
+    } else {
+      authority = [authority];
+    }
+  } else {
+    authority = ['admin'];
+  }
+  return authority;
 }
 
 export function setAuthority(authority) {