Page Permission

src/components/Layout/Menu.js

@@ -5,7 +5,7 @@ import { Link } from 'dva/router'
 import { arrayToTree, queryArray } from 'utils'
 import pathToRegexp from 'path-to-regexp'
 
-const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
+const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
   // 生成树状
   const menuTree = arrayToTree(menu.filter(_ => _.mpid !== '-1'), 'id', 'mpid')
   const levelMap = {}
@@ -119,7 +119,6 @@ Menus.propTypes = {
   menu: PropTypes.array,
   siderFold: PropTypes.bool,
   darkTheme: PropTypes.bool,
-  location: PropTypes.object,
   isNavbar: PropTypes.bool,
   handleClickNavMenu: PropTypes.func,
   navOpenKeys: PropTypes.array,

src/components/Loader/Loader.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styles from './Loader.less'
+
+const Loader = ({ spinning }) => {
+  return (<div className={classNames(styles.loader, { [styles.hidden]: !spinning })}>
+    <div className={styles.warpper}>
+      <div className={styles.inner} />
+      <div className={styles.text} >LOADING</div>
+    </div>
+  </div>)
+}
+
+
+Loader.propTypes = {
+  spinning: PropTypes.bool,
+}
+
+export default Loader

src/components/Loader/Loader.less

@@ -0,0 +1,64 @@
+.loader {
+  display: block;
+  background-color: #fff;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  text-align: center;
+
+  .warpper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .inner {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+    text-indent: -12345px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-left: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    z-index: 100001;
+
+    :local {
+      animation: spinner 600ms infinite linear;
+    }
+  }
+
+  .text {
+    width: 100px;
+    height: 20px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 4px;
+    color: #000;
+  }
+
+  &.hidden {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Loader/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Loader",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Loader.js"
+}

src/components/index.js

@@ -4,6 +4,7 @@ import Iconfont from './Iconfont'
 import Search from './Search'
 import Editor from './Editor'
 import FilterItem from './FilterItem'
+import Loader from './Loader'
 import * as Layout from './Layout/index.js'
 
 import layer from './layer'
@@ -16,5 +17,6 @@ export {
   Search,
   Editor,
   FilterItem,
+  Loader,
   layer,
  }

src/models/app.js

@@ -46,8 +46,8 @@ export default {
       payload,
     }, { call, put }) {
       const { success, user } = yield call(query, payload)
-      const { list } = yield call(menusService.query)
       if (success && user) {
+        const { list } = yield call(menusService.query)
         const { permissions } = user
         yield put({
           type: 'updateState',

src/routes/app.js

@@ -1,19 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import pathToRegexp from 'path-to-regexp'
 import { connect } from 'dva'
-import { Layout } from 'components'
+import { Layout, Loader } from 'components'
 import { classnames, config } from 'utils'
 import { Helmet } from 'react-helmet'
 import '../themes/index.less'
 import './app.less'
 import NProgress from 'nprogress'
-const { prefix } = config
+import Error from './error'
+const { prefix, openPages } = config
 
 const { Header, Bread, Footer, Sider, styles } = Layout
 let lastHref
 
-const App = ({ children, location, dispatch, app, loading }) => {
-  const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu } = app
+const App = ({ children, dispatch, app, loading, location }) => {
+  const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu, permissions } = app
+  let { pathname } = location
+  pathname = pathname.startsWith('/') ? pathname : `/${pathname}`
+  const { iconFontJS, iconFontCSS, logo } = config
+  const current = menu.filter(item => pathToRegexp(item.router || '').exec(pathname))
+  const hasPermission = current.length ? permissions.visit.includes(current[0].id) : false
   const href = window.location.href
 
   if (lastHref !== href) {
@@ -28,7 +35,6 @@ const App = ({ children, location, dispatch, app, loading }) => {
     menu,
     user,
     siderFold,
-    location,
     isNavbar,
     menuPopoverVisible,
     navOpenKeys,
@@ -50,7 +56,6 @@ const App = ({ children, location, dispatch, app, loading }) => {
     menu,
     siderFold,
     darkTheme,
-    location,
     navOpenKeys,
     changeTheme () {
       dispatch({ type: 'app/switchTheme' })
@@ -64,13 +69,12 @@ const App = ({ children, location, dispatch, app, loading }) => {
   const breadProps = {
     menu,
   }
-
-  if (config.openPages && config.openPages.indexOf(location.pathname) > -1) {
-    return <div>{children}</div>
+  if (openPages && openPages.includes(pathname)) {
+    return (<div>
+      <Loader spinning={loading.effects['app/query']} />
+      {children}
+    </div>)
   }
-
-  const { iconFontJS, iconFontCSS, logo } = config
-
   return (
     <div>
       <Helmet>
@@ -86,10 +90,10 @@ const App = ({ children, location, dispatch, app, loading }) => {
         </aside> : ''}
         <div className={styles.main}>
           <Header {...headerProps} />
-          <Bread {...breadProps} location={location} />
+          <Bread {...breadProps} />
           <div className={styles.container}>
             <div className={styles.content}>
-              {children}
+              {hasPermission ? children : <Error />}
             </div>
           </div>
           <Footer />