From f4706ba8a089b54021e0fc88755bb164b387fae8 Mon Sep 17 00:00:00 2001
From: JANGHYUNn <kimjh2369@gmail.com>
Date: Wed, 21 Feb 2024 18:49:42 +0900
Subject: [PATCH] =?UTF-8?q?logout=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=ED=98=84=EC=9E=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=EB=9E=9C=EB=8D=94=EB=A7=81=20=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layouts/components/navbar/UserDropdown.js | 86 ++++++++++---------
 src/_redux/features/account/auth/authThunk.ts |  3 +
 src/containers/main/dash/MainDashContainer.js | 10 +--
 src/modules/utils/customAxiosUtil.ts          |  8 +-
 src/router/hoc/authenticationCheck.tsx        | 12 +--
 5 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/src/@core/layouts/components/navbar/UserDropdown.js b/src/@core/layouts/components/navbar/UserDropdown.js
index ab7d1225..be541994 100644
--- a/src/@core/layouts/components/navbar/UserDropdown.js
+++ b/src/@core/layouts/components/navbar/UserDropdown.js
@@ -30,13 +30,12 @@ const UserDropdown = () => {
   const history = useHistory();
   const { user } = useSelector(state => state.authState);
 
-  const handelrLogout = async () => {
+  const handelrLogout = async e => {
+    e.preventDefault();
     const { payload } = await dispatch(setLogout());
-    console.log(payload);
+
     if (payload === 'SUCCESS') {
-      cookieStorage.removeCookie(COOKIE_ACCESS_TOKEN);
-      cookieStorage.removeCookie(COOKIE_REFRESH_TOKEN);
-      history.push('/account/login');
+      history.replace('/account/login');
     }
   };
 
@@ -73,30 +72,38 @@ const UserDropdown = () => {
   };
 
   return (
-    <UncontrolledDropdown tag='li' className='dropdown-user nav-item'>
-      <DropdownToggle
-        href='/'
-        tag='a'
-        className='nav-link dropdown-user-link'
-        onClick={e => e.preventDefault()}
-      >
-        <div className='user-nav d-sm-flex d-none'>
-          <span className='user-name font-weight-bold'>{user?.memberName}</span>
-          <span className='user-status'>{user?.authId}</span>
-        </div>
-        <Avatar img={userAvatar} imgHeight='40' imgWidth='40' status='online' />
-      </DropdownToggle>
-      <DropdownMenu right>
-        <DropdownItem
-          onClick={profileInfo}
-          tag={Link}
-          // to='/login'
-          to='#'
+    <>
+      <UncontrolledDropdown tag='li' className='dropdown-user nav-item'>
+        <DropdownToggle
+          href='/'
+          tag='a'
+          className='nav-link dropdown-user-link'
+          onClick={e => e.preventDefault()}
         >
-          <User size={14} className='mr-75' />
-          <span className='align-middle'>Profile</span>
-        </DropdownItem>
-        {/* <DropdownItem tag={Link} to='#' onClick={e => e.preventDefault()}>
+          <div className='user-nav d-sm-flex d-none'>
+            <span className='user-name font-weight-bold'>
+              {user?.memberName}
+            </span>
+            <span className='user-status'>{user?.authId}</span>
+          </div>
+          <Avatar
+            img={userAvatar}
+            imgHeight='40'
+            imgWidth='40'
+            status='online'
+          />
+        </DropdownToggle>
+        <DropdownMenu right>
+          <DropdownItem
+            onClick={profileInfo}
+            tag={Link}
+            // to='/login'
+            to='#'
+          >
+            <User size={14} className='mr-75' />
+            <span className='align-middle'>Profile</span>
+          </DropdownItem>
+          {/* <DropdownItem tag={Link} to='#' onClick={e => e.preventDefault()}>
           <Mail size={14} className='mr-75' />
           <span className='align-middle'>Inbox</span>
         </DropdownItem>
@@ -108,17 +115,18 @@ const UserDropdown = () => {
           <MessageSquare size={14} className='mr-75' />
           <span className='align-middle'>Chats</span>
         </DropdownItem> */}
-        <DropdownItem
-          tag={Link}
-          // to='/login'
-          to='#'
-          onClick={handelrLogout}
-        >
-          <Power size={14} className='mr-75' />
-          <span className='align-middle'>Logout</span>
-        </DropdownItem>
-      </DropdownMenu>
-    </UncontrolledDropdown>
+          <DropdownItem
+            tag={Link}
+            // to='/login'
+            to='#'
+            onClick={handelrLogout}
+          >
+            <Power size={14} className='mr-75' />
+            <span className='align-middle'>Logout</span>
+          </DropdownItem>
+        </DropdownMenu>
+      </UncontrolledDropdown>
+    </>
   );
 };
 
diff --git a/src/_redux/features/account/auth/authThunk.ts b/src/_redux/features/account/auth/authThunk.ts
index 0aa19bd2..3f4b7b35 100644
--- a/src/_redux/features/account/auth/authThunk.ts
+++ b/src/_redux/features/account/auth/authThunk.ts
@@ -95,6 +95,9 @@ export const setLogout = createAsyncThunk(
       const accessToken = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
 
       if (accessToken) {
+        cookieStorage.removeCookie(COOKIE_ACCESS_TOKEN);
+        cookieStorage.removeCookie(COOKIE_REFRESH_TOKEN);
+
         const decodedToken = decode<IDecodeToken>(accessToken);
         const { data }: { data: string } = await axios.get(
           `api/acnt/jwt/logout/${decodedToken.cstmrSno}`
diff --git a/src/containers/main/dash/MainDashContainer.js b/src/containers/main/dash/MainDashContainer.js
index 45856196..e3cb8ec0 100644
--- a/src/containers/main/dash/MainDashContainer.js
+++ b/src/containers/main/dash/MainDashContainer.js
@@ -35,12 +35,10 @@ export const MainDashContainer = ({ history, user }) => {
   }, []);
 
   useEffect(() => {
-    if (user) {
-      handlerDronOperationList(
-        user?.authId === 'SUPER' ? 'all' : user?.cptAuthCode
-      );
-    }
-  }, [user]);
+    handlerDronOperationList(
+      user?.authId === 'SUPER' ? 'all' : user?.cptAuthCode
+    );
+  }, []);
 
   // 일 별 비행횟수 통계 날짜 리스트 dispatch
   const handlerStcsDaySearch = date => {
diff --git a/src/modules/utils/customAxiosUtil.ts b/src/modules/utils/customAxiosUtil.ts
index 65ccbd24..f56ac510 100644
--- a/src/modules/utils/customAxiosUtil.ts
+++ b/src/modules/utils/customAxiosUtil.ts
@@ -37,10 +37,10 @@ clientInstance.interceptors.response.use(
     store.dispatch(clientLoaded());
     return response.data;
   },
-  (error: AxiosError) => {
-    const { message } = error;
-    const { method, url } = error.config as AxiosRequestConfig;
-    const { status, statusText } = error.response as AxiosResponse;
+  async (error: AxiosError) => {
+    const { status } = error.response as AxiosResponse;
+    if (status === 401) {
+    }
 
     return Promise.reject(error);
   }
diff --git a/src/router/hoc/authenticationCheck.tsx b/src/router/hoc/authenticationCheck.tsx
index dde559eb..0e96e6de 100644
--- a/src/router/hoc/authenticationCheck.tsx
+++ b/src/router/hoc/authenticationCheck.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useLayoutEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useSelector, useDispatch } from '@store/storeConfig/store';
 import { checkToken } from '@src/_redux/features/account/auth/authThunk';
@@ -17,7 +17,7 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
     const dispatch = useDispatch();
     const { user } = useSelector(state => state.authState);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       const tokenVerification = async () => {
         try {
           // 로그인 해야만 접근 가능한 페이지인지 체크하는 옵션
@@ -25,10 +25,12 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
           const {
             payload: { result }
           } = await dispatch(checkToken() as any);
-          console.log(result);
-          console.log(authRoute);
+
           if (!result) {
-            if (authRoute) props.history.push('/account/login');
+            if (authRoute) {
+              props.history.replace('/account/login');
+              return;
+            }
           } else {
             if (!authRoute) {
               props.history.replace('/main/dashboard');