sync with antd-pro 1.0

Author: WhatAKitty

package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-script-antd-pro",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@antv/data-set": "^0.8.3",
-    "antd": "^3.0.3",
+    "antd": "^3.1.1",
     "bizcharts": "^3.1.0-beta.6",
     "bizcharts-plugin-slider": "^2.0.1",
     "classnames": "^2.2.5",
     "dva": "^2.1.0",
+    "dva-loading": "^1.0.4",
     "enquire-js": "^0.1.1",
     "fastclick": "^1.0.6",
     "history": "^4.7.2",
@@ -23,7 +24,7 @@
     "qs": "^6.5.1",
     "rc-drawer-menu": "^0.5.3",
     "react": "^16.2.0",
-    "react-container-query": "^0.9.1",
+    "react-container-query": "^0.10.0",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.2.0",
     "react-fittext": "^1.0.0",
@@ -39,7 +40,7 @@
     "babel-plugin-import": "^1.6.3",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "less-loader": "^4.0.5",
-    "prettier": "^1.9.2",
+    "prettier": "^1.10.1",
     "react-app-rewire-less-modules": "https://github.com/WhatAKitty/react-app-rewire-less-modules",
     "react-app-rewired": "^1.4.0",
     "react-fetch-mock": "^0.4.1",

src/common/menu.js

@@ -25,6 +25,7 @@ const menuData = [{
     path: 'step-form',
   }, {
     name: '高级表单',
+    authority: 'admin',
     path: 'advanced-form',
   }],
 }, {
@@ -64,6 +65,7 @@ const menuData = [{
   }, {
     name: '高级详情页',
     path: 'advanced',
+    authority: 'admin',
   }],
 }, {
   name: '结果页',
@@ -97,6 +99,7 @@ const menuData = [{
   name: '账户',
   icon: 'user',
   path: 'user',
+  authority: 'guest',
   children: [{
     name: '登录',
     path: 'login',
@@ -114,14 +117,15 @@ const menuData = [{
   target: '_blank',
 }];
 
-function formatter(data, parentPath = '') {
+function formatter(data, parentPath = '', parentAuthority) {
   return data.map((item) => {
     const result = {
       ...item,
       path: `${parentPath}${item.path}`,
+      authority: item.authority || parentAuthority,
     };
     if (item.children) {
-      result.children = formatter(item.children, `${parentPath}${item.path}/`);
+      result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
     }
     return result;
   });

src/common/router.js

@@ -1,37 +1,74 @@
-import React from 'react';
+import { createElement } from 'react';
 import dynamic from 'dva/dynamic';
 import { getMenuData } from './menu';
 
+let routerDataCache;
+
+const modelNotExisted = (app, model) => (
+  // eslint-disable-next-line
+  !app._models.some(({ namespace }) => {
+    return namespace === model.substring(model.lastIndexOf('/') + 1);
+  })
+);
+
 // wrapper of dynamic
-const dynamicWrapper = (app, models, component) => dynamic({
-  app,
-  // eslint-disable-next-line no-underscore-dangle
-  models: () => models.filter(m => !app._models.some(({ namespace }) => namespace === m)).map(m => import(`../models/${m}.js`)),
-  // add routerData prop
-  component: () => {
-    const routerData = getRouterData(app);
-    return component().then((raw) => {
-      const Component = raw.default || raw;
-      return props => <Component {...props} routerData={routerData} />;
+const dynamicWrapper = (app, models, component) => {
+  // () => require('module')
+  // transformed by babel-plugin-dynamic-import-node-sync
+  if (component.toString().indexOf('.then(') < 0) {
+    models.forEach((model) => {
+      if (modelNotExisted(app, model)) {
+        // eslint-disable-next-line
+        app.model(require(`../models/${model}`).default);
+      }
     });
-  },
-});
+    return (props) => {
+      if (!routerDataCache) {
+        routerDataCache = getRouterData(app);
+      }
+      return createElement(component().default, {
+        ...props,
+        routerData: routerDataCache,
+      });
+    };
+  }
+  // () => import('module')
+  return dynamic({
+    app,
+    models: () => models.filter(
+      model => modelNotExisted(app, model)).map(m => import(`../models/${m}.js`)
+    ),
+    // add routerData prop
+    component: () => {
+      if (!routerDataCache) {
+        routerDataCache = getRouterData(app);
+      }
+      return component().then((raw) => {
+        const Component = raw.default || raw;
+        return props => createElement(Component, {
+          ...props,
+          routerData: routerDataCache,
+        });
+      });
+    },
+  });
+};
 
 function getFlatMenuData(menus) {
   let keys = {};
   menus.forEach((item) => {
     if (item.children) {
-      keys[item.path] = item.name;
+      keys[item.path] = { ...item };
       keys = { ...keys, ...getFlatMenuData(item.children) };
     } else {
-      keys[item.path] = item.name;
+      keys[item.path] = { ...item };
     }
   });
   return keys;
 }
 
 export const getRouterData = (app) => {
-  const routerData = {
+  const routerConfig = {
     '/': {
       component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
     },
@@ -45,6 +82,7 @@ export const getRouterData = (app) => {
       component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
       // hideInBreadcrumb: true,
       // name: '工作台',
+      // authority: 'admin',
     },
     '/form/basic-form': {
       component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/BasicForm')),
@@ -127,12 +165,14 @@ export const getRouterData = (app) => {
   };
   // Get name from ./menu.js or just set it in the router data.
   const menuData = getFlatMenuData(getMenuData());
-  const routerDataWithName = {};
-  Object.keys(routerData).forEach((item) => {
-    routerDataWithName[item] = {
-      ...routerData[item],
-      name: routerData[item].name || menuData[item.replace(/^\//, '')],
+  const routerData = {};
+  Object.keys(routerConfig).forEach((item) => {
+    const menuItem = menuData[item.replace(/^\//, '')] || {};
+    routerData[item] = {
+      ...routerConfig[item],
+      name: routerConfig[item].name || menuItem.name,
+      authority: routerConfig[item].authority || menuItem.authority,
     };
   });
-  return routerDataWithName;
+  return routerData;
 };

src/components/Authorized/Authorized.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import CheckPermissions from './CheckPermissions';
+
+class Authorized extends React.Component {
+  render() {
+    const { children, authority, noMatch = null } = this.props;
+    const childrenRender = typeof children === 'undefined' ? null : children;
+    return CheckPermissions(
+      authority,
+      childrenRender,
+      noMatch
+    );
+  }
+}
+
+export default Authorized;

src/components/Authorized/AuthorizedRoute.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Route, Redirect } from 'dva/router';
+import Authorized from './Authorized';
+
+class AuthorizedRoute extends React.Component {
+  render() {
+    const { component: Component, render, authority,
+      redirectPath, ...rest } = this.props;
+    return (
+      <Authorized
+        authority={authority}
+        noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
+      >
+        <Route
+          {...rest}
+          render={props => (Component ? <Component {...props} /> : render(props))}
+        />
+      </Authorized>
+    );
+  }
+}
+
+export default AuthorizedRoute;

src/components/Authorized/CheckPermissions.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PromiseRender from './PromiseRender';
+import { CURRENT } from './index';
+/**
+ * 通用权限检查方法
+ * Common check permissions method
+ * @param { 权限判定 Permission judgment type string |array | Promise | Function } authority
+ * @param { 你的权限 Your permission description  type:string} currentAuthority
+ * @param { 通过的组件 Passing components } target
+ * @param { 未通过的组件 no pass components } Exception
+ */
+const checkPermissions = (authority, currentAuthority, target, Exception) => {
+  // 没有判定权限.默认查看所有
+  // Retirement authority, return target;
+  if (!authority) {
+    return target;
+  }
+  // 数组处理
+  if (Array.isArray(authority)) {
+    if (authority.indexOf(currentAuthority) >= 0) {
+      return target;
+    }
+    return Exception;
+  }
+
+  // string 处理
+  if (typeof authority === 'string') {
+    if (authority === currentAuthority) {
+      return target;
+    }
+    return Exception;
+  }
+
+  // Promise 处理
+  if (authority.constructor.name === 'Promise') {
+    return () => (
+      <PromiseRender ok={target} error={Exception} promise={authority} />
+    );
+  }
+
+  // Function 处理
+  if (typeof authority === 'function') {
+    try {
+      const bool = authority();
+      if (bool) {
+        return target;
+      }
+      return Exception;
+    } catch (error) {
+      throw error;
+    }
+  }
+  throw new Error('unsupported parameters');
+};
+
+export { checkPermissions };
+
+const check = (authority, target, Exception) => {
+  return checkPermissions(authority, CURRENT, target, Exception);
+};
+
+export default check;

src/components/Authorized/CheckPermissions.test.js

@@ -0,0 +1,45 @@
+import { checkPermissions } from './CheckPermissions.js';
+
+const target = 'ok';
+const error = 'error';
+
+describe('test CheckPermissions', () => {
+  it('Correct string permission authentication', () => {
+    expect(checkPermissions('user', 'user', target, error)).toEqual('ok');
+  });
+  it('Correct string permission authentication', () => {
+    expect(checkPermissions('user', 'NULL', target, error)).toEqual('error');
+  });
+  it('authority is undefined , return ok', () => {
+    expect(checkPermissions(null, 'NULL', target, error)).toEqual('ok');
+  });
+  it('currentAuthority is undefined , return error', () => {
+    expect(checkPermissions('admin', null, target, error)).toEqual('error');
+  });
+  it('Wrong string permission authentication', () => {
+    expect(checkPermissions('admin', 'user', target, error)).toEqual('error');
+  });
+  it('Correct Array permission authentication', () => {
+    expect(checkPermissions(['user', 'admin'], 'user', target, error)).toEqual(
+      'ok'
+    );
+  });
+  it('Wrong Array permission authentication,currentAuthority error', () => {
+    expect(
+      checkPermissions(['user', 'admin'], 'user,admin', target, error)
+    ).toEqual('error');
+  });
+  it('Wrong Array permission authentication', () => {
+    expect(checkPermissions(['user', 'admin'], 'guest', target, error)).toEqual(
+      'error'
+    );
+  });
+  it('Wrong Function permission authentication', () => {
+    expect(checkPermissions(() => false, 'guest', target, error)).toEqual(
+      'error'
+    );
+  });
+  it('Correct Function permission authentication', () => {
+    expect(checkPermissions(() => true, 'guest', target, error)).toEqual('ok');
+  });
+});

src/components/Authorized/PromiseRender.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Spin } from 'antd';
+
+export default class PromiseRender extends React.PureComponent {
+    state = {
+      component: false,
+    };
+    async componentDidMount() {
+      this.props.promise
+        .then(() => {
+          this.setState({
+            component: this.props.ok,
+          });
+        })
+        .catch(() => {
+          this.setState({
+            component: this.props.error,
+          });
+        });
+    }
+    render() {
+      const C = this.state.component;
+      return C ? (
+        <C {...this.props} />
+      ) : (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            margin: 'auto',
+            paddingTop: 50,
+            textAlign: 'center',
+          }}
+        >
+          <Spin size="large" />
+        </div>
+      );
+    }
+}