Use Umi Permission Routing (#3587)

Use Umi Permission Routing

config/router.config.js

@@ -19,7 +19,6 @@ export default [
     path: '/',
     component: '../layouts/BasicLayout',
     Routes: ['src/pages/Authorized'],
-    authority: ['admin', 'user'],
     routes: [
       // dashboard
       { path: '/', redirect: '/dashboard/analysis' },

src/layouts/BasicLayout.js

@@ -4,14 +4,11 @@ import DocumentTitle from 'react-document-title';
 import { connect } from 'dva';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
-import pathToRegexp from 'path-to-regexp';
 import Media from 'react-media';
-import Authorized from '@/utils/Authorized';
 import logo from '../assets/logo.svg';
 import Footer from './Footer';
 import Header from './Header';
 import Context from './MenuContext';
-import Exception403 from '../pages/Exception/403';
 import PageLoading from '@/components/PageLoading';
 import SiderMenu from '@/components/SiderMenu';
 import getPageTitle from '@/utils/getPageTitle';
@@ -73,29 +70,6 @@ class BasicLayout extends React.Component {
     };
   }
 
-  getRouteAuthority = (pathname, routeData) => {
-    const routes = routeData.slice(); // clone
-
-    const getAuthority = (routeDatas, path) => {
-      let authorities;
-      routeDatas.forEach(route => {
-        // check partial route
-        if (pathToRegexp(`${route.path}(.*)`).test(path)) {
-          if (route.authority) {
-            authorities = route.authority;
-          }
-          // is exact route?
-          if (!pathToRegexp(route.path).test(path) && route.routes) {
-            authorities = getAuthority(route.routes, path);
-          }
-        }
-      });
-      return authorities;
-    };
-
-    return getAuthority(routes, pathname);
-  };
-
   getLayoutStyle = () => {
     const { fixSiderbar, isMobile, collapsed, layout } = this.props;
     if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
@@ -132,12 +106,10 @@ class BasicLayout extends React.Component {
       isMobile,
       menuData,
       breadcrumbNameMap,
-      route: { routes },
       fixedHeader,
     } = this.props;
 
     const isTop = PropsLayout === 'topmenu';
-    const routerConfig = this.getRouteAuthority(pathname, routes);
     const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
     const layout = (
       <Layout>
@@ -165,9 +137,7 @@ class BasicLayout extends React.Component {
             {...this.props}
           />
           <Content className={styles.content} style={contentStyle}>
-            <Authorized authority={routerConfig} noMatch={<Exception403 />}>
-              {children}
-            </Authorized>
+            {children}
           </Content>
           <Footer />
         </Layout>

src/models/menu.js

@@ -97,6 +97,7 @@ export default {
 
   state: {
     menuData: [],
+    routerData: [],
     breadcrumbNameMap: {},
   },
 
@@ -107,7 +108,7 @@ export default {
       const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);
       yield put({
         type: 'save',
-        payload: { menuData, breadcrumbNameMap },
+        payload: { menuData, breadcrumbNameMap, routerData: routes },
       });
     },
   },

src/pages/Authorized.js

 import React from 'react';
-import RenderAuthorized from '@/components/Authorized';
-import { getAuthority } from '@/utils/authority';
 import Redirect from 'umi/redirect';
+import pathToRegexp from 'path-to-regexp';
+import { connect } from 'dva';
+import Authorized from '@/utils/Authorized';
 
-const Authority = getAuthority();
-const Authorized = RenderAuthorized(Authority);
+function AuthComponent({ children, location, routerData, status }) {
+  const isLogin = status === 'ok';
 
-export default ({ children }) => (
-  <Authorized authority={children.props.route.authority} noMatch={<Redirect to="/user/login" />}>
-    {children}
-  </Authorized>
-);
+  const getRouteAuthority = (pathname, routeData) => {
+    const routes = routeData.slice(); // clone
+
+    const getAuthority = (routeDatas, path) => {
+      let authorities;
+      routeDatas.forEach(route => {
+        // check partial route
+        if (pathToRegexp(`${route.path}(.*)`).test(path)) {
+          if (route.authority) {
+            authorities = route.authority;
+          }
+          // is exact route?
+          if (!pathToRegexp(route.path).test(path) && route.routes) {
+            authorities = getAuthority(route.routes, path);
+          }
+        }
+      });
+      return authorities;
+    };
+
+    return getAuthority(routes, pathname);
+  };
+  return (
+    <Authorized
+      authority={getRouteAuthority(location.pathname, routerData)}
+      noMatch={isLogin ? <Redirect to="/exception/403" /> : <Redirect to="/user/login" />}
+    >
+      {children}
+    </Authorized>
+  );
+}
+export default connect(({ menu: menuModel, login: loginModel }) => ({
+  routerData: menuModel.routerData,
+  status: loginModel.status,
+}))(AuthComponent);