fix login success redirect;fix css load delay

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "antd-admin",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "dependencies": {
     "antd": "^2.11.2",
     "axios": "^0.16.2",
@@ -27,7 +27,8 @@
     "react-dom": "^15.6.1",
     "react-draft-wysiwyg": "^1.10.0",
     "react-helmet": "^5.1.3",
-    "recharts": "^0.22.4"
+    "recharts": "^0.22.4",
+    "roadhog": "^1.2.1"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",

src/components/Layout/Bread.js

@@ -1,4 +1,3 @@
-/* global location */
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
@@ -7,7 +6,7 @@ import pathToRegexp from 'path-to-regexp'
 import { queryArray } from 'utils'
 import styles from './Bread.less'
 
-const Bread = ({ menu }) => {
+const Bread = ({ menu, location }) => {
   // 匹配当前路由
   let pathArray = []
   let current
@@ -68,6 +67,7 @@ const Bread = ({ menu }) => {
 
 Bread.propTypes = {
   menu: PropTypes.array,
+  location: PropTypes.object,
 }
 
 export default Bread

src/components/Layout/Menu.js

@@ -1,12 +1,11 @@
-/* global location */
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon } from 'antd'
 import { Link } from 'dva/router'
 import { arrayToTree, queryArray } from 'utils'
 import pathToRegexp from 'path-to-regexp'
 
-const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
+const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu, location }) => {
   // 生成树状
   const menuTree = arrayToTree(menu.filter(_ => _.mpid !== '-1'), 'id', 'mpid')
   const levelMap = {}
@@ -103,13 +102,16 @@ const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOp
     defaultSelectedKeys = getPathArray(menu, currentMenu, 'mpid', 'id')
   }
 
+  if (!defaultSelectedKeys) {
+    defaultSelectedKeys = ['1']
+  }
+
   return (
     <Menu
       {...menuProps}
       mode={siderFold ? 'vertical' : 'inline'}
       theme={darkTheme ? 'dark' : 'light'}
       onClick={handleClickNavMenu}
-      selectedKeys={defaultSelectedKeys}
       defaultSelectedKeys={defaultSelectedKeys}
     >
       {menuItems}
@@ -124,6 +126,7 @@ Menus.propTypes = {
   handleClickNavMenu: PropTypes.func,
   navOpenKeys: PropTypes.array,
   changeOpenKeys: PropTypes.func,
+  location: PropTypes.object,
 }
 
 export default Menus

src/models/app.js

@@ -30,9 +30,23 @@ export default {
     darkTheme: window.localStorage.getItem(`${prefix}darkTheme`) === 'true',
     isNavbar: document.body.clientWidth < 769,
     navOpenKeys: JSON.parse(window.localStorage.getItem(`${prefix}navOpenKeys`)) || [],
+    locationPathname: '',
+    locationQuery: {},
   },
   subscriptions: {
 
+    setupHistory ({ dispatch, history }) {
+      history.listen((location) => {
+        dispatch({
+          type: 'updateState',
+          payload: {
+            locationPathname: location.pathname,
+            locationQuery: location.query,
+          },
+        })
+      })
+    },
+
     setup ({ dispatch }) {
       dispatch({ type: 'query' })
       let tid
@@ -49,8 +63,9 @@ export default {
 
     * query ({
       payload,
-    }, { call, put }) {
+    }, { call, put, select }) {
       const { success, user } = yield call(query, payload)
+      const { locationPathname } = yield select(_ => _.app)
       if (success && user) {
         const { list } = yield call(menusService.query)
         const { permissions } = user
@@ -76,11 +91,17 @@ export default {
           },
         })
         if (location.pathname === '/login') {
-          yield put(routerRedux.push('/dashboard'))
+          yield put(routerRedux.push({
+            pathname: '/dashboard',
+          }))
         }
-      } else if (config.openPages && config.openPages.indexOf(location.pathname) < 0) {
-        let from = location.pathname
-        window.location = `${location.origin}/login?from=${from}`
+      } else if (config.openPages && config.openPages.indexOf(locationPathname) < 0) {
+        yield put(routerRedux.push({
+          pathname: 'login',
+          query: {
+            from: locationPathname,
+          },
+        }))
       }
     },
 

src/models/login.js

@@ -1,24 +1,21 @@
 import { routerRedux } from 'dva/router'
-import { queryURL } from 'utils'
 import { login } from 'services/login'
 
 export default {
   namespace: 'login',
-  state: {
-    loginLoading: false,
-  },
+
+  state: {},
 
   effects: {
     * login ({
       payload,
-    }, { put, call }) {
-      yield put({ type: 'showLoginLoading' })
+    }, { put, call, select }) {
       const data = yield call(login, payload)
-      yield put({ type: 'hideLoginLoading' })
+      const { locationQuery } = yield select(_ => _.app)
       if (data.success) {
-        const from = queryURL('from')
+        const { from } = locationQuery
         yield put({ type: 'app/query' })
-        if (from) {
+        if (from && from !== '/login') {
           yield put(routerRedux.push(from))
         } else {
           yield put(routerRedux.push('/dashboard'))
@@ -28,18 +25,5 @@ export default {
       }
     },
   },
-  reducers: {
-    showLoginLoading (state) {
-      return {
-        ...state,
-        loginLoading: true,
-      }
-    },
-    hideLoginLoading (state) {
-      return {
-        ...state,
-        loginLoading: false,
-      }
-    },
-  },
+
 }

src/models/user/detail.js

@@ -1,4 +1,3 @@
-/* global location */
 import pathToRegexp from 'path-to-regexp'
 import { query } from '../../services/user'
 
@@ -12,8 +11,8 @@ export default {
 
   subscriptions: {
     setup ({ dispatch, history }) {
-      history.listen(() => {
-        const match = pathToRegexp('/user/:id').exec(location.pathname)
+      history.listen(({ pathname }) => {
+        const match = pathToRegexp('/user/:id').exec(pathname)
         if (match) {
           dispatch({ type: 'query', payload: { id: match[1] } })
         }

src/routes/app.js

@@ -56,6 +56,7 @@ const App = ({ children, dispatch, app, loading, location }) => {
 
   const siderProps = {
     menu,
+    location,
     siderFold,
     darkTheme,
     navOpenKeys,
@@ -70,6 +71,7 @@ const App = ({ children, dispatch, app, loading, location }) => {
 
   const breadProps = {
     menu,
+    location,
   }
   if (openPages && openPages.includes(pathname)) {
     return (<div>
@@ -79,6 +81,7 @@ const App = ({ children, dispatch, app, loading, location }) => {
   }
   return (
     <div>
+      <Loader spinning={loading.effects['app/query']} />
       <Helmet>
         <title>ANTD ADMIN</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -88,11 +91,7 @@ const App = ({ children, dispatch, app, loading, location }) => {
       </Helmet>
       <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
         {!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
-          {siderProps.menu.length === 0 ?
-            null
-            :
-            <Sider {...siderProps} />
-          }
+          {siderProps.menu.length === 0 ? null : <Sider {...siderProps} />}
         </aside> : ''}
         <div className={styles.main}>
           <Header {...headerProps} />

src/routes/dashboard/index.js

@@ -22,7 +22,7 @@ function Dashboard ({ dashboard, loading }) {
 
   return (
     <div>
-      <Loader spinning={loading.models.dashboard} />
+      <Loader spinning={loading.models.dashboard && sales.length === 0} />
       <Row gutter={24}>
         {numberCards}
         <Col lg={18} md={24}>

src/routes/login/index.js

@@ -8,15 +8,13 @@ import styles from './index.less'
 const FormItem = Form.Item
 
 const Login = ({
-  login,
+  loading,
   dispatch,
   form: {
     getFieldDecorator,
     validateFieldsAndScroll,
   },
 }) => {
-  const { loginLoading } = login
-
   function handleOk () {
     validateFieldsAndScroll((errors, values) => {
       if (errors) {
@@ -52,7 +50,7 @@ const Login = ({
           })(<Input size="large" type="password" onPressEnter={handleOk} placeholder="Password" />)}
         </FormItem>
         <Row>
-          <Button type="primary" size="large" onClick={handleOk} loading={loginLoading}>
+          <Button type="primary" size="large" onClick={handleOk} loading={loading.effects.login}>
             Sign in
           </Button>
           <p>
@@ -68,8 +66,8 @@ const Login = ({
 
 Login.propTypes = {
   form: PropTypes.object,
-  login: PropTypes.object,
   dispatch: PropTypes.func,
+  loading: PropTypes.object,
 }
 
-export default connect(({ login }) => ({ login }))(Form.create()(Login))
+export default connect(({ loading }) => ({ loading }))(Form.create()(Login))

webpack.config.js

@@ -1,48 +1,41 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const HtmlWebpackTemplate = require('html-webpack-template')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const webpack = require('webpack')
 
 module.exports = (webpackConfig, env) => {
+  const production = env === 'production'
   // FilenameHash
   webpackConfig.output.chunkFilename = '[name].[hash].js'
 
-  if (env === 'production' && webpackConfig.module) {
-    // ClassnameHash
-    webpackConfig.module.rules.map((item) => {
-      if (item.use && item.use[0] === 'style') {
-        return item.use.map((iitem) => {
-          if (iitem && iitem.loader === 'css') {
-            iitem.options.localIdentName = '[hash:base64:5]'
-          }
-          return iitem
-        })
-      }
-      return item
-    })
-
-    webpackConfig.module.rules.map((item) => {
-      if (item.use && item.use.map){
-        item.use.map(iitem=>{
-          iitem.loader === 'css' && (iitem.options.minimize = true)
-          return iitem
-        })
-      }
-      return item
-    })
+  if (production) {
+    if (webpackConfig.module) {
+      // ClassnameHash
+      webpackConfig.module.rules.map((item) => {
+        if (item.use && item.use[0] === 'style') {
+          return item.use.map((iitem) => {
+            if (iitem && iitem.loader === 'css') {
+              iitem.options.localIdentName = '[hash:base64:5]'
+            }
+            return iitem
+          })
+        }
+        return item
+      })
+    }
+    webpackConfig.plugins.push(
+      new webpack.LoaderOptionsPlugin({
+        minimize: true,
+        debug: false,
+      })
+    )
   }
 
-  // PreLoaders
-  // webpackConfig.module.preLoaders = [{
-  //   test: /\.js$/,
-  //   enforce: 'pre',
-  //   loader: 'eslint',
-  // }]
-
   webpackConfig.plugins = webpackConfig.plugins.concat([
     new CopyWebpackPlugin([
       {
         from: 'src/public',
-        to: env === 'production' ? '../' : webpackConfig.output.outputPath,
+        to: production ? '../' : webpackConfig.output.outputPath,
       },
     ]),
     new HtmlWebpackPlugin({
@@ -52,11 +45,11 @@ module.exports = (webpackConfig, env) => {
       inject: false,
       appMountId: 'root',
       template: `!!ejs-loader!${HtmlWebpackTemplate}`,
-      filename: env === 'production' ? '../index.html' : 'index.html',
+      filename: production ? '../index.html' : 'index.html',
       minify: {
         collapseWhitespace: true,
       },
-      scripts: env === 'production' ? null : ['/roadhog.dll.js'],
+      scripts: production ? null : ['/roadhog.dll.js'],
       meta: [
         {
           name: 'description',