fix: 路由守卫权限优化

src/components/Menu/index.tsx

@@ -50,12 +50,12 @@ class NavSider extends Component<iMenuProps, any> {
                     </Menu.Item>
                     <Menu.Item key="3">
                       {/* <Link to="/login">退出登录</Link> */}
-                      <span onClick={() => userState.logout()}></span>
+                      <span onClick={() => userState.logout()}>退出登录</span>
                     </Menu.Item>
                   </Menu>
                 )
               }} trigger={[ 'click' ]} placement="topRight">
-                <Button size="small" className={styles.bottomBtn}>{userState.userInfo.Name}</Button>
+                <Button size="small" className={styles.bottomBtn}>{userState.userInfo.name}</Button>
               </Dropdown>
             </div>
           </div>

src/components/Navigation/index.tsx

@@ -55,7 +55,7 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
     }
 
     render() {
-        console.log("我渲染了")
+        console.log("路由守卫渲染")
         const { location, routeConfig, match } = this.props
         //如果没有提供routeConfig则不做任何事情
         if (!routeConfig || routeConfig.length <= 0) { return null }
@@ -77,6 +77,7 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
 
         const isLogin = userState.isLogin
 
+
         if (targetRoute instanceof Error) return <ErrorPage/>
 
         if (findRes) {
@@ -93,12 +94,12 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
         }
 
 
-      //以下部分可提出去作为用户自定义部分
-    if (isLogin) {
-        return <LoginHandler ErrorPage={ErrorPage} targetRoute={targetRoute}></LoginHandler>
-    } else {
-        return <NotLoginHandler targetRoute={targetRoute}></NotLoginHandler>
-    }
+        //以下部分可提出去作为用户自定义部分
+        if (isLogin) {
+            return <LoginHandler ErrorPage={ErrorPage} targetRoute={targetRoute}></LoginHandler>
+        } else {
+            return <NotLoginHandler targetRoute={targetRoute}></NotLoginHandler>
+        }
 }
 }
 
@@ -109,7 +110,7 @@ function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
     const noCache = targetRoute.meta?.noCache ? targetRoute.meta.noCache : false
     if (path === '/login') {
         return <Redirect to="/console/dashboard"></Redirect>
-    } else if (!auth || NavigationGuards.permissionAuthentication(auth, userState.userInfo.Role)) {
+    } else if (!auth || NavigationGuards.permissionAuthentication(auth, userState.role)) {
         return (
             <Route path={path} render={
                 props => (

src/index.scss

@@ -1,25 +1,37 @@
+@import './assets/css/common.scss';
 body {
-  margin: 0;
-  padding: 0;
   width: 100%;
   height: 100%;
+  padding: 0;
+  margin: 0;
   font-size: 12px;
   #root {
+    width: 100%;
+    height: 100%;
     font-family: 'Helvetica Neue', 'Hiragino Sans GB', stheiti, 'Microsoft Yahei', '微软雅黑', tahoma, sans-serif;
     font-size: 12px;
-    height: 100%;
-    width: 100%;
     .App {
-      height: 100%;
-      width: 100%;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
+      width: 100%;
+      height: 100%;
+      .ka-wrapper {
+        width: 100% !important;
+        height: 100% !important;
+        padding: 0;
+        margin: 0;
+        .ka-content {
+          width: 100% !important;
+          height: 100% !important;
+          padding: 0;
+          margin: 0;
+        }
+      }
     }
   }
 }
 #nprogress .bar {
-  background: #1890ff !important;
   height: 2px !important;
+  background: #1890ff !important;
 }
-@import './assets/css/common.scss';

src/pages/Login/index.tsx

@@ -30,7 +30,6 @@ class NormalLoginForm extends Component<iLoginProps, iState> {
     // if (code === consts.RET_CODE.SUCCESS) {
       // }
     userState.login(values)
-    this.props.history!.push('/')
   }
 
   componentWillUnmount() {

src/router/routes.ts

@@ -20,10 +20,12 @@ export const routeConfig: RouteModel[] = [
   {
     path: '/console',
     component: AsyncModuleLoader(() => import('@/layout/NavSide')),
+    auth: [ 'USER', 'ADMIN' ],
     childRoutes: [
       {
         path: 'dashboard',
         component: AsyncModuleLoader(() => import('@/pages/Dashboard')),
+        auth: [ 'USER', 'ADMIN' ],
         defaultChildRoute: true, //是否作为默认子路由
         meta: {
           icon: 'chalkboard',
@@ -35,6 +37,7 @@ export const routeConfig: RouteModel[] = [
       {
         path: 'contract',
         component: AsyncModuleLoader(() => import('@/pages/Contract')),
+        auth: [ 'USER', 'ADMIN' ],
         meta: {
           icon: 'cogs',
           title: '合同管理',
@@ -45,6 +48,7 @@ export const routeConfig: RouteModel[] = [
       {
         path: 'safe',
         component: AsyncModuleLoader(() => import('@/pages/Safe')),
+        auth: [ 'USER', 'ADMIN' ],
         meta: {
           icon: 'user-cog',
           title: '安全巡检',
@@ -55,6 +59,7 @@ export const routeConfig: RouteModel[] = [
       {
         path: 'quality',
         component: AsyncModuleLoader(() => import('@/pages/Quality')),
+        auth: [ 'USER', 'ADMIN' ],
         meta: {
           icon: 'toolbox',
           title: '质量巡检',
@@ -65,6 +70,7 @@ export const routeConfig: RouteModel[] = [
       {
         path: 'management',
         component: AsyncModuleLoader(() => import('@/pages/Management')),
+        auth: [ 'ADMIN' ],
         meta: {
           icon: 'cogs',
           title: '项目设置',
@@ -74,6 +80,7 @@ export const routeConfig: RouteModel[] = [
           {
             path: 'info',
             defaultChildRoute: true,
+            auth: [ 'ADMIN' ],
             component: AsyncModuleLoader(() => import('@/pages/Management/Info')),
             meta: {
               title: '项目信息'
@@ -81,6 +88,7 @@ export const routeConfig: RouteModel[] = [
           },
           {
             path: 'setting',
+            auth: [ 'ADMIN' ],
             component: AsyncModuleLoader(() => import('@/pages/Management/Setting')),
             meta: {
               title: '账号设置'
@@ -88,6 +96,7 @@ export const routeConfig: RouteModel[] = [
           },
           {
             path: 'tender',
+            auth: [ 'ADMIN' ],
             component: AsyncModuleLoader(() => import('@/pages/Management/Tender')),
             meta: {
               title: '标段管理'
@@ -99,18 +108,22 @@ export const routeConfig: RouteModel[] = [
       {
         path: 'account',
         component: AsyncModuleLoader(() => import('@/pages/Account')),
+        auth: [ 'USER', 'ADMIN' ],
         childRoutes: [
           {
             path: 'info',
             defaultChildRoute: true,
+            auth: [ 'USER', 'ADMIN' ],
             component:AsyncModuleLoader(() => import('@/pages/Account/Information'))
           },
           {
             path: 'safe',
+            auth: [ 'USER', 'ADMIN' ],
             component:AsyncModuleLoader(() => import('@/pages/Account/Safe'))
           },
           {
             path: 'manual',
+            auth: [ 'USER', 'ADMIN' ],
             component:AsyncModuleLoader(() => import('@/pages/Account/Manual'))
           }
         ]

src/store/mobx/user/index.ts

@@ -3,26 +3,36 @@ import { apiLogin } from '@/pages/Login/api'
 import { iFromValues } from '@/types/login'
 import { delUserInfo, getUserInfo, saveUserInfo } from '@/utils/common/user'
 import consts from '@/utils/consts'
+import history from '@/utils/history'
 import { action, computed, observable } from 'mobx'
 import { iUserInfo } from './types'
+
 class UserState {
-  @observable userInfo: iUserInfo = {
-    Id: '',
-    ProjectId: '',
-    Account: '',
-    Name: '',
-    Company: '',
-    Role: '',
-    Mobile: '',
-    Telephone: '',
-    Csrf: ''
+  initUserState = {
+    account: '',
+    accountGroup: 0,
+    company: '',
+    csrf: '',
+    enable: 0,
+    id: '',
+    isAdmin: 0,
+    mobile: '',
+    name: '',
+    password: '',
+    position: '',
+    projectId: '',
+    role: '',
+    telephone: ''
   }
+  @observable userInfo: iUserInfo = this.initUserState
+
+  @observable permission: [] = []
 
   @computed get isLogin() {
-    return !!this.userInfo.Id
+    return !!this.userInfo.id
   }
-  @computed get permission() {
-    return this.userInfo.Role
+  @computed get role() {
+    return this.userInfo.isAdmin ? 'ADMIN' : 'USER'
   }
 
   @action login(values: iFromValues) {
@@ -30,6 +40,7 @@ class UserState {
       if (code === consts.RET_CODE.SUCCESS) {
         saveUserInfo(data)
         this.userInfo = data
+        history.push('/')
       }
     })
   }
@@ -38,17 +49,8 @@ class UserState {
     apiLogout().then(({ code = -1 }) => {
       if (code === consts.RET_CODE.SUCCESS) {
         delUserInfo()
-        this.userInfo = {
-          Id: '',
-          ProjectId: '',
-          Account: '',
-          Name: '',
-          Company: '',
-          Role: '',
-          Mobile: '',
-          Telephone: '',
-          Csrf: ''
-        }
+        this.userInfo = this.initUserState
+        history.push('/login')
       }
     })
   }

src/store/mobx/user/types.ts

@@ -1,11 +1,16 @@
 export interface iUserInfo {
-  Id: string
-  ProjectId: string
-  Account: string
-  Name: string
-  Company: string
-  Role: string
-  Mobile?: string
-  Telephone?: string
-  Csrf?: string
+  account: string;
+  accountGroup: number;
+  company: string;
+  csrf: string;
+  enable: number;
+  id: string;
+  isAdmin: number;
+  mobile: string;
+  name: string;
+  password: string;
+  position: string;
+  projectId: string;
+  role: string;
+  telephone: string;
 }