From 91be534a97bcc3400a003ccce0168e66368a3440 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E8=81=AA?= Date: Fri, 23 Nov 2018 21:49:50 +0800 Subject: [PATCH] remove menu authorized (#2911) * Close: https://github.com/ant-design/ant-design-pro/issues/2910 * remove menu authorized to menu-model --- src/components/Login/index.js | 4 +- src/components/SiderMenu/BaseMenu.js | 16 +---- src/layouts/BasicLayout.js | 66 ++++--------------- src/layouts/Header.js | 2 - src/models/menu.js | 99 ++++++++++++++++++++++++++++ 5 files changed, 116 insertions(+), 71 deletions(-) create mode 100644 src/models/menu.js diff --git a/src/components/Login/index.js b/src/components/Login/index.js index 8ac6d311..79cc56de 100644 --- a/src/components/Login/index.js +++ b/src/components/Login/index.js @@ -113,7 +113,9 @@ class Login extends Component { {otherChildren} - ) : children} + ) : ( + children + )} diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js index 88ca0422..e819cda3 100644 --- a/src/components/SiderMenu/BaseMenu.js +++ b/src/components/SiderMenu/BaseMenu.js @@ -40,11 +40,7 @@ export default class BaseMenu extends PureComponent { } return menusData .filter(item => item.name && !item.hideInMenu) - .map(item => { - // make dom - const ItemDom = this.getSubMenuOrItem(item, parent); - return this.checkPermissionItem(item.authority, ItemDom); - }) + .map(item => this.getSubMenuOrItem(item, parent)) .filter(item => item); }; @@ -121,16 +117,6 @@ export default class BaseMenu extends PureComponent { ); }; - // permission to check - checkPermissionItem = (authority, ItemDom) => { - const { Authorized } = this.props; - if (Authorized && Authorized.check) { - const { check } = Authorized; - return check(authority, ItemDom); - } - return ItemDom; - }; - conversionPath = path => { if (path && path.indexOf('http') === 0) { return path; diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 3b7553f7..7e2b0f29 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -23,39 +23,6 @@ const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer')); const { Content } = Layout; -function mapRoutesToMenu(routes, parentAuthority, parentName) { - return routes - .map(item => { - if (!item.name || !item.path) { - return null; - } - - let locale = 'menu'; - if (parentName) { - locale = `${parentName}.${item.name}`; - } else { - locale = `menu.${item.name}`; - } - - const result = { - ...item, - name: formatMessage({ id: locale, defaultMessage: item.name }), - locale, - authority: item.authority || parentAuthority, - }; - if (item.routes) { - const children = mapRoutesToMenu(item.routes, item.authority, locale); - // Reduce memory usage - result.children = children; - } - delete result.routes; - return result; - }) - .filter(item => item); -} - -const memoizedMapRoutesToMenu = memoizeOne(mapRoutesToMenu, isEqual); - const query = { 'screen-xs': { maxWidth: 575, @@ -90,18 +57,21 @@ class BasicLayout extends React.PureComponent { this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual); } - state = { - menuData: this.getMenuData(), - }; - componentDidMount() { - const { dispatch } = this.props; + const { + dispatch, + route: { routes, authority }, + } = this.props; dispatch({ type: 'user/fetchCurrent', }); dispatch({ type: 'setting/getSetting', }); + dispatch({ + type: 'menu/getMenuData', + payload: { routes, authority }, + }); } componentDidUpdate(preProps) { @@ -114,10 +84,6 @@ class BasicLayout extends React.PureComponent { } } - componentWillUnmount() { - cancelAnimationFrame(this.renderRef); - } - getContext() { const { location } = this.props; return { @@ -126,19 +92,13 @@ class BasicLayout extends React.PureComponent { }; } - getMenuData() { - const { - route: { routes, authority }, - } = this.props; - return memoizedMapRoutesToMenu(routes, authority); - } - /** * 获取面包屑映射 * @param {Object} menuData 菜单配置 */ getBreadcrumbNameMap() { const routerMap = {}; + const { menuData } = this.props; const flattenMenuData = data => { data.forEach(menuItem => { if (menuItem.children) { @@ -148,7 +108,7 @@ class BasicLayout extends React.PureComponent { routerMap[menuItem.path] = menuItem; }); }; - flattenMenuData(this.getMenuData()); + flattenMenuData(menuData); return routerMap; } @@ -214,8 +174,8 @@ class BasicLayout extends React.PureComponent { children, location: { pathname }, isMobile, + menuData, } = this.props; - const { menuData } = this.state; const isTop = PropsLayout === 'topmenu'; const routerConfig = this.matchParamsPath(pathname); const layout = ( @@ -223,7 +183,6 @@ class BasicLayout extends React.PureComponent { {isTop && !isMobile ? null : ( ({ +export default connect(({ global, setting, menu }) => ({ collapsed: global.collapsed, layout: setting.layout, + menuData: menu.menuData, ...setting, }))(props => ( diff --git a/src/layouts/Header.js b/src/layouts/Header.js index 6e092c88..b7e7a759 100644 --- a/src/layouts/Header.js +++ b/src/layouts/Header.js @@ -7,7 +7,6 @@ import router from 'umi/router'; import GlobalHeader from '@/components/GlobalHeader'; import TopNavHeader from '@/components/TopNavHeader'; import styles from './Header.less'; -import Authorized from '@/utils/Authorized'; const { Header } = Layout; @@ -128,7 +127,6 @@ class HeaderView extends PureComponent { { + if (!item.name || !item.path) { + return null; + } + + let locale = 'menu'; + if (parentName) { + locale = `${parentName}.${item.name}`; + } else { + locale = `menu.${item.name}`; + } + + const result = { + ...item, + name: formatMessage({ id: locale, defaultMessage: item.name }), + locale, + authority: item.authority || parentAuthority, + }; + if (item.routes) { + const children = formatter(item.routes, item.authority, locale); + // Reduce memory usage + result.children = children; + } + delete result.routes; + return result; + }) + .filter(item => item); +} + +const memoizeOneFormatter = memoizeOne(formatter, isEqual); + +/** + * get SubMenu or Item + */ +const getSubMenu = item => { + // doc: add hideChildrenInMenu + if (item.children && !item.hideChildrenInMenu && item.children.some(child => child.name)) { + return { + ...item, + children: filterMenuData(item.children), // eslint-disable-line + }; + } + return item; +}; + +/** + * filter menuData + */ +const filterMenuData = menuData => { + if (!menuData) { + return []; + } + return menuData + .filter(item => item.name && !item.hideInMenu) + .map(item => { + // make dom + const ItemDom = getSubMenu(item); + const data = check(item.authority, ItemDom); + return data; + }) + .filter(item => item); +}; + +export default { + namespace: 'menu', + + state: { + menuData: [], + }, + + effects: { + *getMenuData({ payload }, { put }) { + const { routes, authority } = payload; + yield put({ + type: 'save', + payload: filterMenuData(memoizeOneFormatter(routes, authority)), + }); + }, + }, + + reducers: { + save(state, action) { + return { + ...state, + menuData: action.payload, + }; + }, + }, +}; -- GitLab