From 4a201868c000b4ec689c2b054fab06438238e925 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 19 Jul 2018 12:24:00 +0800 Subject: [PATCH] Optimization : add router.config.js --- config/config.js | 180 +------------------------------ config/router.config.js | 176 ++++++++++++++++++++++++++++++ src/pages/layouts/LoadingPage.js | 29 +---- src/utils/authority.js | 13 ++- 4 files changed, 193 insertions(+), 205 deletions(-) create mode 100644 config/router.config.js diff --git a/config/config.js b/config/config.js index f080272d..87469d16 100644 --- a/config/config.js +++ b/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', diff --git a/config/router.config.js b/config/router.config.js new file mode 100644 index 00000000..e67feded --- /dev/null +++ b/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', + }, + ], + }, + ], + }, + ], + }, +]; diff --git a/src/pages/layouts/LoadingPage.js b/src/pages/layouts/LoadingPage.js index 1bcce392..e104ff2c 100644 --- a/src/pages/layouts/LoadingPage.js +++ b/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 { ); diff --git a/src/utils/authority.js b/src/utils/authority.js index 95cff6d7..7c2fc013 100644 --- a/src/utils/authority.js +++ b/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) { -- GitLab