基础配置

package-lock.json

@@ -8361,6 +8361,11 @@
         }
       }
     },
+    "loading-bar": {
+      "version": "0.2.7",
+      "resolved": "http://47.107.176.206:8089/repository/xbdnpm/loading-bar/-/loading-bar-0.2.7.tgz",
+      "integrity": "sha512-LFCwLHDPZAHneBg/0bQL9lkqS+eiB1DYkRkpIFHxsodkc5auZJW30/Q1bW+KVhSsJneY/pghr9EO5SggI66u6Q=="
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "http://47.107.176.206:8089/repository/xbdnpm/locate-path/-/locate-path-3.0.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^7.2.1",
     "antd": "^4.4.2",
     "axios": "^0.19.2",
+    "loading-bar": "^0.2.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",

src/api/user.js

+import http from '@/libs/fetch'
+
+export const getMenu = () => {
+    return http.request({
+        url: '/user/sysLogin/getMenu',
+        params: { applyPlatform: 0, applyCarrier: 0, productId:  100005 }
+    })
+}
\ No newline at end of file

src/components/Layout/view.js

 import React, { useState, useEffect } from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router-dom'
 import { Layout, Menu } from 'antd'
 import { getAllRouter } from '@/libs/utilts'
 import { APP } from '../../config'
@@ -16,9 +16,10 @@ const Item = ({url, children, ...props}) => {
         )
 }
 
-const Page = ({ children, userRoute = [], location }) => {
+const Page = ({ children, userRoute = [] }) => {
     const [collapsed, setCollapsed] = useState(false)
     const [index, setIdex] = useState([])
+    const location = useLocation()
 
     const onCollapse = () => setCollapsed(!collapsed)
 

src/config/index.js

@@ -8,7 +8,7 @@ const USER_CONFIG = {
 
 const APP = {
     /** @description token存储的名称 */
-    tokenName: 'token',
+    tokenName: 'sessionid',
     /** @description token在存储的时长，默认无操作后的30分钟。0 表示关闭浏览器即删除。单位 秒 */
     tokenExpires: 0,
     /** @description token使用的存储类型，可选值: coookie, session, 默认值是session*/

src/index.js

@@ -4,7 +4,10 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 import 'antd/dist/antd.css';
+import { init } from 'loading-bar'
+import 'loading-bar/src/index.css'
 
+init()
 ReactDOM.render(
     <App />,
   document.getElementById('root')

src/libs/http-request.js

@@ -135,7 +135,7 @@ class HttpRequest {
   saveLoginInfo(jwt, sessionid, vid, data) {
     data = JSON.parse(data)
     const { applyCarrier, applyPlatform } = data
-    store.commit('SYSTEM_LOGIN', { jwt , sessionid, vid, applyCarrier, applyPlatform})
+    store.commit('SYSTEM_LOGIN', { jwt, sessionid, vid, applyCarrier, applyPlatform })
   }
 }
 

src/router/guards.js

+import React from 'react'
+import { show, hide } from 'loading-bar' 
+
+// 路由守卫
+export const Guards = (Page) => {
+    return class extends React.Component {
+        
+        /** 进入页面 */
+        componentDidMount() {
+            hide()
+        }
+        /** 离开页面 */
+        componentWillUnmount() {
+            show()
+        }
+        
+        render() {
+            return <Page {...this.props} />
+        }
+    }
+}
\ No newline at end of file

src/router/modules/basisRoute.js

@@ -5,6 +5,6 @@ export default [
     {
         url: '/404',
         exact,
-        component: loadable(() => import('@/view/error/404'))
+        component: loadable(() => import('@/view/error/404')) // 懒加载
     }
 ]
\ No newline at end of file

src/router/router-view.js

 import React, { useState, useEffect } from 'react'
-import Layout from '@/components/Layout'
-import { Switch, Route } from 'react-router-dom'
+import { Switch, Route, useHistory } from 'react-router-dom'
+import { Guards } from './guards'
 import { APP } from '@/config'
 import connect from '../store/modules/route/connect'
 import { getAllRouter } from '../libs/utilts'
+import { getToken } from 'xbd-cookie'
+import Layout from '@/components/Layout'
+import { show, hide } from 'loading-bar'
+import http from '@/libs/fetch'
+import { getMenu } from '@/api/user'
+import { Modal } from 'antd'
 
-
+import error401 from "@/view/error/401"
+import error404 from "@/view/error/404" 
 
 /** 获取全部路由的路径 */
 const getAllRouterName = route => route.map(e => e.url)
 
-const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSatatus }) => {
+/** 路由视图 */
+const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSatatus, SYSTEM_LOGIN}) => {
     const [openRoute, setOpenRoute] = useState([])
+    const history = useHistory()
 
     useEffect(() => {
         // 二级路由转一级路由
@@ -39,17 +48,37 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat
         })
 
         setOpenRoute(newRoutes)
-
     }, [userRoute, serviceRoute])
 
+    useEffect(() => {
+        const token = getToken()
+
+        if (userSatatus) 
+            return 
+        else if (token) {
+            show()
+            http.setHeader('sessionid', token)
+            getMenu()
+                .then(res => {
+                    hide()
+                    SYSTEM_LOGIN(res)
+                })
+                .catch(err => {
+                    hide()
+                    Modal.error({ title: '错误', content: err, onOk: () => history.replace('/login') })
+                })
+        } else 
+            history.replace('/login')
+    }, [])
+
     return (
-        <Switch>
         <Layout>
-                {basisRoute.map(e => <Route path={e.url} exact={e.exact} component={e.component} key={e.url} />)}
-                {openRoute.map(e => <Route path={e.url} exact={e.exact} component={e.component} key={e.url} />)}
-                
-            </Layout>
+            <Switch>
+                    {basisRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)}  key={e.url} />)}
+                    {openRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)} key={e.url} />)}
+                    <Route component={error401} />
             </Switch>
+        </Layout>
     )
 }
 

src/store/modules/route/connect.js

@@ -7,7 +7,11 @@ const mapState = state => ({
 
 const mapDispatch = dispatch => ({
     add: route =>  dispatch.route.add(route),
-    change: route => dispatch.route.change(route)
+    change: route => dispatch.route.change(route),
+    SYSTEM_LOGIN: res =>{
+        dispatch.user.SYSTEM_LOGIN(res)
+        dispatch.route.change(res.menu)
+    }
 })
 
 

src/store/modules/route/index.js

-import data from './data.json'
 
 export default {
     state: {
-        route: data        
+        route: []        
     },
     reducers: {
         add(state, route) {
-            return { route: [...state, route] }
+            return { route: [...state.route, ...route] }
         },
         change(_, route) {
             return { route: [...route] }

src/store/modules/user/index.js

+
 export default {
     state: {
-        userSatatus: false
+        userSatatus: false,
+        codes: [],
+        business: {},
+        company: {},
+        platformAccount: {},
+        user: {}
     },
     reducers: {
-        loginSucess() {
+        // 登录成功
+        SYSTEM_LOGIN(_, res) {
+            console.log(res)
+            const { loginUserVo, codes } = res
+            return {codes, userSatatus: true, ...loginUserVo}
+        },
+        // 退出登录
+        SYSTEM_OUT() {
 
         }
     }

src/view/error/401.js

+import React from 'react'
+
+const Page = ({ history }) => {
+    return (
+        <div>
+            <h1 onClick={() => history.push('/')} >404错误,点击回到首页</h1>
+        </div>
+    )
+}
+
+export default Page
\ No newline at end of file