fix: DropMenu优化

src/components/Menu/index.tsx

@@ -1,36 +1,21 @@
 import logo from '@/assets/img/logo.png'
-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 React from 'react'
 import { connect } from 'react-redux'
-import { Link, RouteComponentProps, withRouter } from "react-router-dom"
-import { apiLogout } from './api'
+import { Link } from "react-router-dom"
+import store from 'store'
 import styles from './index.module.scss'
 import './index.scss'
 import MenuItem from './MenuItem'
-interface iMenuProps extends RouteComponentProps{
+interface iMenuProps {
   list: iMenuItem[],
-  history: any
   username: string
-  logout: Function
 }
 
 const NavSider:React.FC<iMenuProps> = (props)=> {
-  const { list: MeunList, history, username, logout } = props
-  const handleLogout = async () => {
-      const { code = -1 } = await apiLogout()
-      if (code === consts.RET_CODE.SUCCESS) {
-        history.push('/')
-      }
-  }
-  useEffect(() => {
-    return () => {
-      logout()
-    }
-  }, [])
+  const { list: MeunList, username } = props
   return (
     <div className="main-nav">
       <div className="logo"><img src={logo}></img></div>
@@ -49,25 +34,7 @@ const NavSider:React.FC<iMenuProps> = (props)=> {
             )
           }
           <div className="pi-text-center">
-            <Dropdown overlay={() => {
-                return (
-                  <Menu>
-                    <Menu.Item key="0">
-                      <Link to="/acount/safe">账号资料</Link>
-                    </Menu.Item>
-                    <Menu.Item key="1">
-                      <Link to="/acount/safe">账号安全</Link>
-                    </Menu.Item>
-                    <Menu.Divider />
-                    <Menu.Item key="2">
-                      <Link to="/acount/safe">帮助中心</Link>
-                    </Menu.Item>
-                    <Menu.Item key="3">
-                      <span onClick={handleLogout}>退出登录</span>
-                    </Menu.Item>
-                  </Menu>
-                )
-            }} trigger={[ 'click' ]} placement="topRight">
+            <Dropdown overlay={DropMenu} trigger={[ 'click' ]} placement="topRight">
               <Button size="small" className={styles.bottomBtn}>{username}</Button>
             </Dropdown>
           </div>
@@ -81,9 +48,24 @@ const mapStateToProps = (state:RootState) => {
     username: state.user.userInfo.Name
   }
 }
-const mapDispathToProps = {
-  logout: () => {
-    return { type: DEL_USER_INFO }
-  }
+
+const DropMenu = () => {
+  return (
+    <Menu>
+      <Menu.Item key="0">
+        <Link to="/acount/safe">账号资料</Link>
+      </Menu.Item>
+      <Menu.Item key="1">
+        <Link to="/acount/safe">账号安全</Link>
+      </Menu.Item>
+      <Menu.Divider />
+      <Menu.Item key="2">
+        <Link to="/acount/safe">帮助中心</Link>
+      </Menu.Item>
+      <Menu.Item key="3">
+        <span onClick={store.dispatch()}>退出登录</span>
+      </Menu.Item>
+    </Menu>
+  )
 }
-export default withRouter(connect(mapStateToProps, mapDispathToProps)(NavSider))
+export default connect(mapStateToProps)(NavSider)

src/store/modules/user/index.ts

@@ -1,3 +1,6 @@
+import { apiLogout } from '@/components/Menu/api'
+import consts from '@/utils/consts'
+import history from '@/utils/history'
 import { delUserInfo, getUserInfo, saveUserInfo } from './../../../utils/common/user'
 import { CHECK_PERMISSION, DEL_USER_INFO, iUserInfo, iUserInfoState, SAVE_USER_INFO, UserInfoActionTypes } from './types'
 export const initUserState: iUserInfoState = {
@@ -23,7 +26,6 @@ export function userInfoReducer(state = initUserState, action: UserInfoActionTyp
       return { ...state, userInfo: action.payload, isLogin: true, permission: action.payload.Role }
       break
     case DEL_USER_INFO:
-      delUserInfo()
       return { ...initUserState }
     case CHECK_PERMISSION:
       return { ...action.payload }
@@ -40,10 +42,15 @@ export function updateUserInfo(userInfo: iUserInfo): UserInfoActionTypes{
   }
 }
 
-export function deleteUserInfo(): UserInfoActionTypes {
-  return {
-    type: DEL_USER_INFO
-  }
+export async function deleteUserInfo(): UserInfoActionTypes {
+    const { code = -1 } = await apiLogout()
+    if (code === consts.RET_CODE.SUCCESS) {
+      history.push('/')
+      delUserInfo()
+    }
+    return {
+      type: DEL_USER_INFO
+    }
 }
 
 export function checkPermission(): UserInfoActionTypes {

src/utils/consts.ts

@@ -6,10 +6,10 @@ export default {
     PROD: ''
   },
   TOKEN_API: '', // 获取token
-  TOKEN_INVALID_CODE: [2, 3], // 接口返回码如果是2/3 则表明token过期或无效 需要自动刷新token
-  TOKEN_WHITE_LIST: ['/api/login'], // 不需要设置token的白名单
+  TOKEN_INVALID_CODE: [ 2, 3 ], // 接口返回码如果是2/3 则表明token过期或无效 需要自动刷新token
+  TOKEN_WHITE_LIST: [ '/api/login' ], // 不需要设置token的白名单
   RET_CODE: { SUCCESS: 0, FAIL: 1, TOKEN_UNDEFINED: 19, TOKEN_EXPIRED: 2 }, // 接口返回状态码
-  RETRY: {COUNT: 3, DELAY: 1000} // 请求重试次数/间隙
+  RETRY: { COUNT: 3, DELAY: 1000 } // 请求重试次数/间隙
 
 }