From a867ec14576f17e6ad1ebf516e2a3d06c2486972 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Mon, 5 Feb 2024 15:52:17 +0900 Subject: [PATCH] =?UTF-8?q?route=20hoc=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/auth/service/jwtTokenUtil.ts | 5 +- src/router/hoc/AuthRoutes.tsx | 37 -------------- src/router/hoc/ResolveRoutes.tsx | 22 ++++---- src/router/hoc/authenticationCheck.tsx | 43 ++++++++++++++++ src/router/routes/RouteAccount.js | 15 +++--- src/router/routes/RouteAnalysis.js | 22 ++++---- src/router/routes/RouteBasis.js | 50 +++++++++++++++---- src/router/routes/RouteDashboard.js | 5 +- src/router/routes/RouteLaance.js | 10 +++- src/router/routes/RouteStatistics.js | 15 ++++-- src/router/routes/RouteWeather.js | 16 +++--- src/router/routes/RouterCstmrService.js | 15 ++++-- src/router/routes/index.js | 5 +- tsconfig.paths.json | 3 +- 14 files changed, 167 insertions(+), 96 deletions(-) delete mode 100644 src/router/hoc/AuthRoutes.tsx create mode 100644 src/router/hoc/authenticationCheck.tsx diff --git a/src/modules/account/auth/service/jwtTokenUtil.ts b/src/modules/account/auth/service/jwtTokenUtil.ts index a3bac778..e58b7026 100644 --- a/src/modules/account/auth/service/jwtTokenUtil.ts +++ b/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 ''; } diff --git a/src/router/hoc/AuthRoutes.tsx b/src/router/hoc/AuthRoutes.tsx deleted file mode 100644 index 528990cb..00000000 --- a/src/router/hoc/AuthRoutes.tsx +++ /dev/null @@ -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 ; - } 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 ; - // default: - // return ; - // } - - return ; - } -} diff --git a/src/router/hoc/ResolveRoutes.tsx b/src/router/hoc/ResolveRoutes.tsx index 7e20ca6f..6bd65f22 100644 --- a/src/router/hoc/ResolveRoutes.tsx +++ b/src/router/hoc/ResolveRoutes.tsx @@ -1,6 +1,5 @@ import { Suspense, useEffect } from 'react'; -import { Route, Switch } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; 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, { - ...props, - meta: route.meta - }); - + const Auth = authenticationCheck( + route.component, + route.meta as { authRoute: boolean } + ); return ( - + - + ); diff --git a/src/router/hoc/authenticationCheck.tsx b/src/router/hoc/authenticationCheck.tsx new file mode 100644 index 00000000..0ffa4cea --- /dev/null +++ b/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 ; + } + return AuthenticationCheck; +} diff --git a/src/router/routes/RouteAccount.js b/src/router/routes/RouteAccount.js index 0def04a0..2afcf840 100644 --- a/src/router/routes/RouteAccount.js +++ b/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(() => - import('../../views/account/AccountMypage') - ) + component: lazy(() => import('../../views/account/AccountMypage')), + meta: { + authRoute: true + } }, { path: '/account/find', component: lazy(() => import('../../views/account/AccountFind')), layout: 'BlankLayout', meta: { - authRoute: true + authRoute: false } } ]; diff --git a/src/router/routes/RouteAnalysis.js b/src/router/routes/RouteAnalysis.js index 66f7f2b5..75a2b47e 100644 --- a/src/router/routes/RouteAnalysis.js +++ b/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: { - // naveLink: '/analysis/history/detail' - // } + ), + meta: { + authRoute: true + } }, { path: '/analysis/simulation/index', component: lazy(() => import('../../views/analysis/simulation/AnalysisSimulation') ), - layout: 'BlankLayout' - // meta: { - // open: '/analysis/history/list' - // // naveLink: '/analysis/history/detail' - // } + layout: 'BlankLayout', + meta: { + authRoute: true + } } ]; diff --git a/src/router/routes/RouteBasis.js b/src/router/routes/RouteBasis.js index c8e4fe2a..67b7cdf5 100644 --- a/src/router/routes/RouteBasis.js +++ b/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 + } } ]; diff --git a/src/router/routes/RouteDashboard.js b/src/router/routes/RouteDashboard.js index 8e6674b0..39555876 100644 --- a/src/router/routes/RouteDashboard.js +++ b/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 + } } ]; diff --git a/src/router/routes/RouteLaance.js b/src/router/routes/RouteLaance.js index dfc19e54..7e5cf3fc 100644 --- a/src/router/routes/RouteLaance.js +++ b/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 + } } ]; diff --git a/src/router/routes/RouteStatistics.js b/src/router/routes/RouteStatistics.js index f3a4fcb7..1fdfc964 100644 --- a/src/router/routes/RouteStatistics.js +++ b/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 + } } ]; diff --git a/src/router/routes/RouteWeather.js b/src/router/routes/RouteWeather.js index 86d55a3a..f41fec1e 100644 --- a/src/router/routes/RouteWeather.js +++ b/src/router/routes/RouteWeather.js @@ -1,18 +1,14 @@ import { lazy } from 'react'; const RouteWeather = [ - { path: '/weather/info/index', - component: lazy(() => - import('../../views/weather/WeatherView') - ), - layout: 'BlankLayout' - // meta: { - // open: '/analysis/history/list' - // // naveLink: '/analysis/history/detail' - // } + component: lazy(() => import('../../views/weather/WeatherView')), + layout: 'BlankLayout', + meta: { + authRoute: true + } } ]; -export default RouteWeather; \ No newline at end of file +export default RouteWeather; diff --git a/src/router/routes/RouterCstmrService.js b/src/router/routes/RouterCstmrService.js index b681a7e8..a71d7db6 100644 --- a/src/router/routes/RouterCstmrService.js +++ b/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', diff --git a/src/router/routes/index.js b/src/router/routes/index.js index b890cf81..41205ed7 100644 --- a/src/router/routes/index.js +++ b/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', diff --git a/tsconfig.paths.json b/tsconfig.paths.json index ede25d85..af1e4e4e 100644 --- a/tsconfig.paths.json +++ b/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/*"] } } }