route hoc 적용

src/modules/account/auth/service/jwtTokenUtil.ts

@@ -1,12 +1,14 @@
 import decode from 'jwt-decode';
 import dayjs from 'dayjs';
-import { HOST } from '../../../../configs/constants';
+import { HOST } from '@configs/constants';
 import { LoginData } from '../models';
 import {
   cookieStorage,
   COOKIE_ACCESS_TOKEN,
   COOKIE_REFRESH_TOKEN
 } from './cookie';
+import { store } from '@store/storeConfig/store';
+import * as Actions from '@modules/account/auth/actions';
 
 const JWT_FLEFIX = 'palnet ';
 export const checkTokenExpired = (token?: string) => {
@@ -23,6 +25,7 @@ export const getAccessToken = async () => {
   let token = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
 
   if (!token || token == undefined || token == 'undefined') {
+    store.dispatch(Actions.setLogout.request());
     return '';
   }
 

src/router/hoc/AuthRoutes.tsx

@@ -1,37 +0,0 @@
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { Redirect, RouteComponentProps } from 'react-router-dom';
-import { useSelector } from '@store/storeConfig/store';
-import { IRoute } from '../routes/type';
-import * as Actions from '../../modules/account/auth/actions';
-
-interface IFinalRoute extends RouteComponentProps {
-  route: IRoute;
-}
-
-export default function AuthRoutes(props: IFinalRoute) {
-  const { isLogin } = useSelector(state => state.authState);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (!isLogin) {
-      dispatch(Actions.check.request());
-    }
-  }, [isLogin]);
-
-  if (isLogin === false && !props.route.meta?.authRoute) {
-    return <Redirect to='/account/login' />;
-  } else {
-    const Component: (props: IFinalRoute) => JSX.Element = props.route
-      .component as (props: IFinalRoute) => JSX.Element;
-    // switch (props.route.path) {
-    //   case '/account/register':
-    //   case '/account/find':
-    //     return <Redirect to='/main/dashboard' />;
-    //   default:
-    //     return <route.component {...props} />;
-    // }
-
-    return <Component {...props} />;
-  }
-}

src/router/hoc/ResolveRoutes.tsx

@@ -1,6 +1,5 @@
 import { Suspense, useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
 import BlankLayout from '@layouts/BlankLayout';
 import HeaderLayout from '@layouts/HeaderLayout';
 import HorizontalLayout from '@src/layouts/HorizontalLayout';
@@ -10,7 +9,11 @@ import { useRouterTransition } from '@hooks/useRouterTransition';
 import LayoutWrapper from '@layouts/components/layout-wrapper';
 import { IRoute } from '../routes/type';
 import { Routes } from '../routes';
-import AuthRoutes from './AuthRoutes';
+import authenticationCheck from './authenticationCheck';
+
+interface IFinalRoute extends RouteComponentProps {
+  route: IRoute;
+}
 
 export default function ResolveRoutes() {
   const [layout, setLayout] = useLayout();
@@ -69,13 +72,12 @@ export default function ResolveRoutes() {
                   path={route.path}
                   exact={route.exact === true}
                   render={props => {
-                    Object.assign(routerProps, {
+                    const Auth = authenticationCheck(
-                      ...props,
+                      route.component,
-                      meta: route.meta
+                      route.meta as { authRoute: boolean }
-                    });
+                    );
-
                     return (
-                      <Suspense fallback={null}>
+                      <Suspense fallback={null} key={route.path}>
                         <LayoutWrapper
                           layout={DefaultLayout}
                           transition={transition}
@@ -96,7 +98,7 @@ export default function ResolveRoutes() {
                               }
                             : {})}
                         >
-                          <AuthRoutes route={route} {...props} />
+                          <Auth {...props} />
                         </LayoutWrapper>
                       </Suspense>
                     );

src/router/hoc/authenticationCheck.tsx

@@ -0,0 +1,43 @@
+import { ReactNode, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { useSelector } from '@store/storeConfig/store';
+import { IRoute } from '../routes/type';
+import * as Actions from '../../modules/account/auth/actions';
+import clientInstance from '../../modules/utils/customAxiosUtil';
+
+interface IOption {
+  authRoute?: boolean;
+}
+
+export default function (SpecificComponent: ReactNode, option: IOption) {
+  function AuthenticationCheck(props: RouteComponentProps) {
+    const user = useSelector(state => state.authState.user);
+    const dispatch = useDispatch();
+    useEffect(() => {
+      const tokenVerification = async () => {
+        try {
+          const { authRoute } = option;
+          if (authRoute) {
+            const {
+              data: { result }
+            } = await clientInstance.get('/api/acnt/jwt/valid/token');
+            if (!result) {
+              props.history.push('/account/login');
+            }
+            dispatch(Actions.check.request());
+          }
+        } catch (error) {
+          props.history.push('/account/login');
+        }
+      };
+
+      tokenVerification();
+    }, []);
+    const Component: (props: RouteComponentProps) => JSX.Element =
+      SpecificComponent as (props: RouteComponentProps) => JSX.Element;
+
+    return <Component {...props} />;
+  }
+  return AuthenticationCheck;
+}

src/router/routes/RouteAccount.js

@@ -6,7 +6,7 @@ const RouteAccount = [
     component: lazy(() => import('../../views/account/AccountLoginView')),
     layout: 'BlankLayout',
     meta: {
-      authRoute: true
+      authRoute: false
     }
   },
   {
@@ -14,21 +14,22 @@ const RouteAccount = [
     component: lazy(() => import('../../views/account/AccountRegisterView')),
     layout: 'BlankLayout',
     meta: {
-      authRoute: true
+      authRoute: false
     }
-  }, 
+  },
   {
     path: '/mypage/myinfo/',
-    component: lazy(() =>
+    component: lazy(() => import('../../views/account/AccountMypage')),
-      import('../../views/account/AccountMypage')
+    meta: {
-    )
+      authRoute: true
+    }
   },
   {
     path: '/account/find',
     component: lazy(() => import('../../views/account/AccountFind')),
     layout: 'BlankLayout',
     meta: {
-      authRoute: true
+      authRoute: false
     }
   }
 ];

src/router/routes/RouteAnalysis.js

@@ -5,27 +5,29 @@ const RouteAnalysis = [
     path: '/analysis/history/list',
     component: lazy(() =>
       import('../../views/analysis/history/AnalysisHistory')
-    )
+    ),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/analysis/history/detail/:id',
     component: lazy(() =>
       import('../../views/analysis/history/AnalysisHistoryDetail')
-    )
+    ),
-    // ,meta: {
+    meta: {
-    //   naveLink: '/analysis/history/detail'
+      authRoute: true
-    // }
+    }
   },
   {
     path: '/analysis/simulation/index',
     component: lazy(() =>
       import('../../views/analysis/simulation/AnalysisSimulation')
     ),
-    layout: 'BlankLayout'
+    layout: 'BlankLayout',
-    // meta: {
+    meta: {
-    //   open: '/analysis/history/list'
+      authRoute: true
-    //   // naveLink: '/analysis/history/detail'
+    }
-    // }
   }
 ];
 

src/router/routes/RouteBasis.js

@@ -3,41 +3,68 @@ import { lazy } from 'react';
 const RouteBasis = [
   {
     path: '/basis/group/index',
-    component: lazy(() => import('../../views/basis/group/BasisGroup'))
+    component: lazy(() => import('../../views/basis/group/BasisGroup')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/group/detail/:id',
-    component: lazy(() => import('../../views/basis/group/BasisGroupDetail'))
+    component: lazy(() => import('../../views/basis/group/BasisGroupDetail')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/group/create',
-    component: lazy(() => import('../../views/basis/group/BasisGroupDetail'))
+    component: lazy(() => import('../../views/basis/group/BasisGroupDetail')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/group/join/index',
     component: lazy(() =>
       import('../../views/basis/group/BasisGroupDetailJoin')
-    )
+    ),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/group/approval/index',
-    component: lazy(() => import('../../views/basis/group/BasisGroupAproval'))
+    component: lazy(() => import('../../views/basis/group/BasisGroupAproval')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/group/users/index',
-    component: lazy(() => import('../../views/basis/group/BasisGroupUsers'))
+    component: lazy(() => import('../../views/basis/group/BasisGroupUsers')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/dron/index',
-    component: lazy(() => import('../../views/basis/dron/BasisDron'))
+    component: lazy(() => import('../../views/basis/dron/BasisDron')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/dron/detail/:id',
-    component: lazy(() => import('../../views/basis/dron/BasisDronDetail'))
+    component: lazy(() => import('../../views/basis/dron/BasisDronDetail')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/basis/dron/create',
-    component: lazy(() => import('../../views/basis/dron/BasisDronDetail'))
+    component: lazy(() => import('../../views/basis/dron/BasisDronDetail')),
+    meta: {
+      authRoute: true
+    }
   },
 
   {
@@ -45,7 +72,10 @@ const RouteBasis = [
     component: lazy(() =>
       import('../../views/basis/flight/schedule/FlightSchedule')
     ),
-    layout: 'BlankLayout'
+    layout: 'BlankLayout',
+    meta: {
+      authRoute: true
+    }
   }
 ];
 

src/router/routes/RouteDashboard.js

@@ -4,7 +4,10 @@ const RouteDashboard = [
   {
     exact: true,
     path: '/main/dashboard',
-    component: lazy(() => import('../../views/main/MainDashboard'))
+    component: lazy(() => import('../../views/main/MainDashboard')),
+    meta: {
+      authRoute: true
+    }
   }
 ];
 

src/router/routes/RouteLaance.js

@@ -3,11 +3,17 @@ import { lazy } from 'react';
 const RouteLaance = [
   {
     path: '/laanc/index',
-    component: lazy(() => import('../../views/laanc/LaancView'))
+    component: lazy(() => import('../../views/laanc/LaancView')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/laanc/report',
-    component: lazy(() => import('../../views/laanc/ReportView'))
+    component: lazy(() => import('../../views/laanc/ReportView')),
+    meta: {
+      authRoute: true
+    }
   }
 ];
 

src/router/routes/RouteStatistics.js

@@ -3,17 +3,26 @@ import { lazy } from 'react';
 const RouteStatistics = [
   {
     path: '/statistics/flight',
-    component: lazy(() => import('../../views/statistics/FlightView'))
+    component: lazy(() => import('../../views/statistics/FlightView')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/statistics/abnormal',
     component: lazy(() =>
       import('../../views/statistics/AbnormalSituationView')
-    )
+    ),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/statistics/result',
-    component: lazy(() => import('../../views/statistics/FlightResultView'))
+    component: lazy(() => import('../../views/statistics/FlightResultView')),
+    meta: {
+      authRoute: true
+    }
   }
 ];
 

src/router/routes/RouteWeather.js

@@ -1,18 +1,14 @@
 import { lazy } from 'react';
 
 const RouteWeather = [
- 
   {
     path: '/weather/info/index',
-    component: lazy(() =>
+    component: lazy(() => import('../../views/weather/WeatherView')),
-      import('../../views/weather/WeatherView')
+    layout: 'BlankLayout',
-    ),
+    meta: {
-    layout: 'BlankLayout'
+      authRoute: true
-    // meta: {
+    }
-    //   open: '/analysis/history/list'
-    //   // naveLink: '/analysis/history/detail'
-    // }
   }
 ];
 
-export default RouteWeather;
+export default RouteWeather;

src/router/routes/RouterCstmrService.js

@@ -3,11 +3,17 @@ import { lazy } from 'react';
 const RouteSystem = [
   {
     path: '/cstmrService/faq',
-    component: lazy(() => import('../../views/cstmrService/FaqView'))
+    component: lazy(() => import('../../views/cstmrService/FaqView')),
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/cstmrService/inquiry',
-    component: lazy(() => import('../../views/cstmrService/InquiryView'))
+    component: lazy(() => import('../../views/cstmrService/InquiryView')),
+    meta: {
+      authRoute: true
+    }
   },
   // {
   //   path: '/cstmrService/inquirylist',
@@ -17,7 +23,10 @@ const RouteSystem = [
     path: '/cstmrService/inquirywrite',
     component: lazy(() =>
       import('../../components/cstmrService/inquiry/InquiryWrite')
-    )
+    ),
+    meta: {
+      authRoute: true
+    }
   }
   // {
   //   path: '/cstmrService/admininquirylist',

src/router/routes/index.js

@@ -81,7 +81,10 @@ const Routes = [
   {
     path: '/control',
     component: lazy(() => import('../../views/control')),
-    layout: 'BlankLayout'
+    layout: 'BlankLayout',
+    meta: {
+      authRoute: true
+    }
   },
   {
     path: '/history/record/sample1',

tsconfig.paths.json

@@ -12,7 +12,8 @@
       "@configs/*": ["src/configs/*"],
       "@utils/*": ["src/utility/Utils/*"],
       "@hooks/*": ["src/utility/hooks/*"],
-      "@component/*": ["src/components/*"]
+      "@component/*": ["src/components/*"],
+      "@modules/*": ["src/modules/*"]
     }
   }
 }