fix: 修复卸载组件时报错的问题

src/components/Menu/index.tsx

@@ -1,10 +1,11 @@
 import logo from '@/assets/img/logo.png'
-import store from '@/store'
-import { deleteUserInfo } from '@/store/modules/user'
+import { DEL_USER_INFO } from '@/store/modules/user/types'
+import { RootState } from '@/store/reducers'
 import { iMenuItem } from '@/types/router'
 import consts from '@/utils/consts'
 import { Button, Dropdown, Menu } from "antd"
 import React, { useEffect } from 'react'
+import { connect } from 'react-redux'
 import { Link, RouteComponentProps, withRouter } from "react-router-dom"
 import { apiLogout } from './api'
 import styles from './index.module.scss'
@@ -13,10 +14,12 @@ import MenuItem from './MenuItem'
 interface iMenuProps extends RouteComponentProps{
   list: iMenuItem[],
   history: any
+  username: string
+  logout: Function
 }
 
 const NavSider:React.FC<iMenuProps> = (props)=> {
-  const { list: MeunList, history } = props
+  const { list: MeunList, history, username, logout } = props
   const handleLogout = async () => {
       const { code = -1 } = await apiLogout()
       if (code === consts.RET_CODE.SUCCESS) {
@@ -25,7 +28,7 @@ const NavSider:React.FC<iMenuProps> = (props)=> {
   }
   useEffect(() => {
     return () => {
-      store.dispatch(deleteUserInfo())
+      logout()
     }
   }, [])
   return (
@@ -65,7 +68,7 @@ const NavSider:React.FC<iMenuProps> = (props)=> {
                   </Menu>
                 )
             }} trigger={[ 'click' ]} placement="topRight">
-              <Button size="small" className={styles.bottomBtn} >张三</Button>
+              <Button size="small" className={styles.bottomBtn}>{username}</Button>
             </Dropdown>
           </div>
         </div>
@@ -73,4 +76,14 @@ const NavSider:React.FC<iMenuProps> = (props)=> {
     </div>
   )
 }
-export default withRouter(NavSider)
+const mapStateToProps = (state:RootState) => {
+  return {
+    username: state.user.userInfo.Name
+  }
+}
+const mapDispathToProps = {
+  logout: () => {
+    return { type: DEL_USER_INFO }
+  }
+}
+export default withRouter(connect(mapStateToProps, mapDispathToProps)(NavSider))

src/pages/Login/index.tsx

@@ -13,30 +13,24 @@ import styles from './index.module.scss'
 import './index.scss'
 
 // 正常登录Form表单
-interface iProjectInfo {
-  id?: number
-  code?: number
-  name?: string
-}
-
 const initLoginState = {
   projectInfo: '',
   projectCode: '',
   visible: false,
-  user: initUserState
+  user: initUserState.userInfo
 }
 type iState = typeof initLoginState
 const mapStateToProps = (state: RootState) => {
   return {}
 }
 const mapDispathToProps = {
-  saveUser: (user: iUserInfo) => {
+  saveUser(user: iUserInfo) {
     return updateUserInfo(user)
   }
 }
 // @ts-ignore
 @connect(mapStateToProps, mapDispathToProps)
-class NormalLoginForm extends Component<Partial<iLoginProps>, iState> {
+class NormalLoginForm extends Component<iLoginProps, iState> {
 
   constructor(props: iLoginProps) {
     super(props)
@@ -51,17 +45,14 @@ class NormalLoginForm extends Component<Partial<iLoginProps>, iState> {
   }
 
   componentWillUnmount() {
-    this.props.saveUser(this.state.user)
+    this.props.saveUser!(this.state.user)
   }
   handleProjectCode = async (e: any) => {
-    console.log(this.props)
-
     const projectCode = e.target?.value
     const { code = -1, data = [] } = await apiProject(projectCode)
     if (code === consts.RET_CODE.SUCCESS) {
       if (data.length && data[0].name) {
         this.setState({ projectInfo: data[0].name })
-
       }
     }
 

src/router/Guard.tsx

@@ -9,8 +9,9 @@ import { AnyAction } from 'redux'
 
 const NavigationGuards:React.FC<NavigationGuardsProps> = props => {
   const { location, routeConfig, match, check, permission, isLogin } = props
-
-  check()
+  useEffect(() => {
+    check()
+  }, [])
   const parentPath: string | null = match?.path || null // 父路由的路径
   const targetPath: string | null  = location?.pathname || null// 目标路由的位置
   const targetRoute: RouteModol | null = targetPath && findTargetRoute(parentPath, targetPath, routeConfig) || null

src/store/modules/user/index.ts

@@ -24,7 +24,9 @@ export function userInfoReducer(state = initUserState, action: UserInfoActionTyp
       break
     case DEL_USER_INFO:
       delUserInfo()
-      return { ...state }
+      return { ...initUserState }
+    case CHECK_PERMISSION:
+      return { ...action.payload }
     default:
       return state
   }

src/types/login.ts

@@ -1,6 +1,6 @@
 interface iLoginProps {
   history: any
-  saveUser: () => void
+  saveUser?: Function
 }
 
 interface iRetrieveFormProps {
@@ -17,5 +17,5 @@ export {
   iLoginProps,
   iRetrieveFormProps,
   iFromValues
-}
+};