- 添加菜单权限控制

admin-web/mock/admin.js

+import adminMenu from './geographic/admin-menu.json';
+import adminMenuAll from './geographic/admin-menu-all.json';
+import adminUrls from './geographic/admin-urls';
+
+/* eslint-disable */
+function getAdminMenu(req, res) {
+  return res.json(adminMenu);
+}
+
+function getAdminMenuAll(req, res) {
+  return res.json(adminMenuAll);
+}
+
+function getAdminUrls(req, res) {
+  return res.json(adminUrls);
+}
+
+export default {
+  'GET /admin-api/admin/resource/admin_menu_tree': getAdminMenuAll,
+  'GET /admin-api/admin/resource/admin_url_list': getAdminUrls,
+};

admin-web/mock/geographic/admin-menu-all.json

+{
+  "code": 0,
+  "message": "",
+  "data": "all"
+}

admin-web/mock/geographic/admin-menu.json

+{
+  "code": 0,
+  "message": "",
+  "data": [
+    {
+      "children": [
+        {
+          "handler": "/order/list1",
+          "id": 1,
+          "name": "商品管理1",
+          "pid": 1
+        },
+        {
+          "handler": "/order/list2",
+          "id": 1,
+          "name": "商品管理2",
+          "pid": 1
+        }
+      ],
+      "handler": "/home",
+      "id": 1,
+      "name": "商品管理",
+      "pid": 1
+    }
+  ]
+}

admin-web/mock/geographic/admin-urls.json

+{
+  "code": 0,
+  "data": ["/admin/source/add", "/admin/source/delete"],
+  "message": "string"
+}

admin-web/src/components/AuthorityControl/index.js

 import React, { PureComponent } from 'react';
-import GlobalAuthority from '../../layouts/GlobalAuthorityContext';
+import UrlsContext from '../../layouts/UrlsContext';
 
 // 用于控制权限
 class AuthorityControl extends PureComponent {
   render() {
     const { authKey, children } = this.props;
     return (
-      <GlobalAuthority.Consumer>
+      <UrlsContext.Consumer>
         {context => {
           const { authList } = context;
           return <div>{authList[authKey] ? children : '无权限'}</div>;
         }}
-      </GlobalAuthority.Consumer>
+      </UrlsContext.Consumer>
     );
   }
 }

admin-web/src/components/SiderMenu/index.js

@@ -6,6 +6,7 @@ import { getFlatMenuKeys } from './SiderMenuUtils';
 const SiderMenuWrapper = React.memo(props => {
   const { isMobile, menuData, collapsed, onCollapse } = props;
   const flatMenuKeys = getFlatMenuKeys(menuData);
+
   return isMobile ? (
     <Drawer
       visible={!collapsed}

admin-web/src/layouts/BasicLayout.js

@@ -11,6 +11,7 @@ import logo from '../assets/logo.svg';
 import Footer from './Footer';
 import Header from './Header';
 import Context from './MenuContext';
+import UrlsContext from './UrlsContext';
 import Exception403 from '../pages/Exception/403';
 import PageLoading from '@/components/PageLoading';
 import SiderMenu from '@/components/SiderMenu';
@@ -59,6 +60,10 @@ class BasicLayout extends React.Component {
     dispatch({
       type: 'setting/getSetting',
     });
+    dispatch({
+      type: 'menu/getUrlsData',
+      payload: { routes, authority },
+    });
     dispatch({
       type: 'menu/getMenuData',
       payload: { routes, authority },
@@ -73,6 +78,13 @@ class BasicLayout extends React.Component {
     };
   }
 
+  getUrlsContext() {
+    const { urlsData } = this.props;
+    return {
+      ...urlsData,
+    };
+  }
+
   getRouteAuthority = (pathname, routeData) => {
     const routes = routeData.slice(); // clone
 
@@ -166,7 +178,7 @@ class BasicLayout extends React.Component {
           />
           <Content className={styles.content} style={contentStyle}>
             <Authorized authority={routerConfig} noMatch={<Exception403 />}>
-              {children}
+              <UrlsContext.Provider values={this.getUrlsContext()}>{children}</UrlsContext.Provider>
             </Authorized>
           </Content>
           <Footer />
@@ -194,6 +206,7 @@ export default connect(({ global, setting, menu: menuModel }) => ({
   collapsed: global.collapsed,
   layout: setting.layout,
   menuData: menuModel.menuData,
+  urlsData: menuModel.urlsData,
   breadcrumbNameMap: menuModel.breadcrumbNameMap,
   ...setting,
 }))(props => (

admin-web/src/layouts/GlobalAuthorityContext.js → admin-web/src/layouts/UrlsContext.js

 import React from 'react';
 
 // 创建全局的权限控制 context，方便在所有页面使用
-const GlobalAuthorityContext = React.createContext({
-  theme: 'dark',
-  toggle: () => {},
-});
+const UrlsContext = React.createContext({});
 
-export default GlobalAuthorityContext;
+export default UrlsContext;

admin-web/src/models/menu.js → admin-web/src/models/menu.jsx

@@ -3,6 +3,7 @@ import isEqual from 'lodash/isEqual';
 import { formatMessage } from 'umi/locale';
 import Authorized from '@/utils/Authorized';
 import { menu } from '../defaultSettings';
+import { getAdminMenus, getAdminUrls } from '../services/admin';
 
 const { check } = Authorized;
 
@@ -70,6 +71,26 @@ const filterMenuData = menuData => {
     .map(item => check(item.authority, getSubMenu(item)))
     .filter(item => item);
 };
+
+/**
+ * 递归构建服务端，配置的菜单
+ * @param resultMenuData
+ */
+const recursionBuildResultMenu = resultMenuData => {
+  const res = {};
+  for (let i = 0; i < resultMenuData.length; i += 1) {
+    const menuItem = resultMenuData[i];
+    // 存在子节点
+    res[menuItem.handler] = {
+      ...menuItem,
+    };
+    if (menuItem.children) {
+      res[menuItem.handler].children = recursionBuildResultMenu(menuItem.children);
+    }
+  }
+  return res;
+};
+
 /**
  * 获取面包屑映射
  * @param {Object} menuData 菜单配置
@@ -97,26 +118,59 @@ export default {
 
   state: {
     menuData: [],
+    urlsData: {},
     breadcrumbNameMap: {},
   },
 
   effects: {
-    *getMenuData({ payload }, { put }) {
+    *getMenuData({ payload }, { put, call }) {
+      const { data } = yield call(getAdminMenus);
       const { routes, authority } = payload;
-      const menuData = filterMenuData(memoizeOneFormatter(routes, authority));
+      // authority 已经不适用
+      const antMenuData = filterMenuData(memoizeOneFormatter(routes, authority));
+
+      let menuData = antMenuData;
+      const resultMenuData = data;
+      if (data !== 'all') {
+        // 处理后台数据结构
+        const buildResultMenu = recursionBuildResultMenu(resultMenuData);
+        // 过滤没有权限的菜单
+        menuData = antMenuData.filter(item => {
+          if (buildResultMenu[item.path]) {
+            return item;
+          }
+          return false;
+        });
+      }
+
+      // 生成 menu 和 router mapping
       const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);
       yield put({
         type: 'save',
         payload: { menuData, breadcrumbNameMap },
       });
     },
+    *getUrlsData(state, { put, call }) {
+      const { data } = yield call(getAdminUrls);
+
+      // 构建 {'/user': true} 这种 map 结构方便取数据、
+      const urlsData = {};
+      data.forEach(item => {
+        urlsData[item] = true;
+      });
+
+      yield put({
+        type: 'save',
+        payload: { urlsData },
+      });
+    },
   },
 
   reducers: {
-    save(state, action) {
+    save(state, { payload }) {
       return {
         ...state,
-        ...action.payload,
+        ...payload,
       };
     },
   },

admin-web/src/pages/Home/Home.js

 import React, { Component } from 'react';
 import { Button } from 'antd';
 import AuthorityControl from '../../components/AuthorityControl';
-import GlobalAuthority from '../../layouts/GlobalAuthorityContext';
+import UrlsContext from '../../layouts/UrlsContext';
 
 export default class Home extends Component {
   state = {};
@@ -17,12 +17,12 @@ export default class Home extends Component {
     };
 
     return (
-      <GlobalAuthority.Provider value={GlobalAuthorityProps}>
+      <UrlsContext.Provider value={GlobalAuthorityProps}>
         <AuthorityControl authKey="home.button">
           <Button type="primary">按钮 控制</Button>
         </AuthorityControl>
         <h1>home...</h1>
-      </GlobalAuthority.Provider>
+      </UrlsContext.Provider>
     );
   }
 }

admin-web/src/services/admin.js

+import { stringify } from 'qs';
+import request from '@/utils/request';
+
+export async function getAdminMenus() {
+  return request('/admin-api/admin/resource/admin_menu_tree');
+}
+
+export async function getAdminUrls(params) {
+  return request(`/admin-api/admin/resource/admin_url_list?${stringify(params)}`);
+}

admin-web/src/utils/request.js

@@ -22,20 +22,21 @@ const codeMessage = {
   504: '网关超时。',
 };
 
-const checkStatus = response => {
+function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
     return response;
   }
   const errortext = codeMessage[response.status] || response.statusText;
-  notification.error({
+  notification.warning({
     message: `请求错误 ${response.status}: ${response.url}`,
     description: errortext,
   });
+
   const error = new Error(errortext);
   error.name = response.status;
   error.response = response;
   throw error;
-};
+}
 
 const cachedSave = (response, hashcode) => {
   /**

admin-web/笔记

+
+登陆账号
+admin
+nicai