diff --git a/src/@core/layouts/components/navbar/UserDropdown.js b/src/@core/layouts/components/navbar/UserDropdown.js index 9df35052..ab7d1225 100644 --- a/src/@core/layouts/components/navbar/UserDropdown.js +++ b/src/@core/layouts/components/navbar/UserDropdown.js @@ -18,15 +18,26 @@ import { UncontrolledDropdown } from '@component/ui'; import { setLogout } from '@src/_redux/features/account/auth/authThunk'; +import { + COOKIE_ACCESS_TOKEN, + COOKIE_REFRESH_TOKEN, + cookieStorage +} from '@src/modules/account/auth/service/cookie'; const UserDropdown = () => { // ** Store Vars const dispatch = useDispatch(); const history = useHistory(); - const { isLogin, user } = useSelector(state => state.authState); + const { user } = useSelector(state => state.authState); const handelrLogout = async () => { - dispatch(setLogout()); + 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'); + } }; // useEffect(() => { diff --git a/src/_redux/features/account/auth/authThunk.ts b/src/_redux/features/account/auth/authThunk.ts index 3c4c75bb..9a405b8e 100644 --- a/src/_redux/features/account/auth/authThunk.ts +++ b/src/_redux/features/account/auth/authThunk.ts @@ -48,11 +48,7 @@ export const setLogin = createAsyncThunk( cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken); cookieStorage.setCookie(COOKIE_REFRESH_TOKEN, data.refreshToken); - const { data: user }: { data: ICheckAuthencationRs } = await axios.get( - `api/acnt/jwt/profile/${data.cstmrSno}` - ); - - return user; + thunkAPI.dispatch(checkCookie()); } catch (error) { thunkAPI.dispatch( openModal({ @@ -109,14 +105,8 @@ export const setLogout = createAsyncThunk( `api/acnt/jwt/logout/${decodedToken.cstmrSno}` ); - if (data === 'SUCCESS') location.href = '/account/login'; + return data; } - - cookieStorage.removeCookie(COOKIE_ACCESS_TOKEN); - cookieStorage.removeCookie(COOKIE_REFRESH_TOKEN); - - // yield put(replace('/')); - location.href = '/'; } catch (error) { thunkAPI.dispatch( openModal({ @@ -287,3 +277,25 @@ export const updateUserPw = createAsyncThunk( } } ); + +export const checkToken = createAsyncThunk( + 'account/checkToken', + async (_, thunkAPI) => { + try { + const { data }: { data: boolean } = await axios.get( + '/api/acnt/jwt/valid/token' + ); + thunkAPI.dispatch(checkCookie()); + return data; + } catch (error) { + thunkAPI.dispatch( + openModal({ + errorCode: ERROR_MESSAGE.code, + errorMessage: ERROR_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + } + } +); diff --git a/src/components/account/login/AccountLogin.js b/src/components/account/login/AccountLogin.js index bb6c8147..fb359271 100644 --- a/src/components/account/login/AccountLogin.js +++ b/src/components/account/login/AccountLogin.js @@ -15,12 +15,9 @@ import kacLogo from '../../../assets/images/logo/kac_logo.svg'; import { setLogin } from '@src/_redux/features/account/auth/authThunk'; import { openModal } from '@src/_redux/features/comn/message/messageSlice'; -export const AccountLogin = ({ props }) => { +export const AccountLogin = ({ history }) => { const dispatch = useDispatch(); - // 로그인 결과 - const { isLogin } = useSelector(state => state.authState); - // 로그인 폼 const [loginForm, setLoginForm] = useState({ userId: '', @@ -47,7 +44,7 @@ export const AccountLogin = ({ props }) => { }; // 로그인 유효성검사 핸들러 - const handelrLogin = () => { + const handelrLogin = async () => { if (!loginForm.userId) { dispatch( openModal({ @@ -66,16 +63,13 @@ export const AccountLogin = ({ props }) => { return; } - dispatch(setLogin(loginForm)); + const { meta } = await dispatch(setLogin(loginForm)); + console.log(meta); + if (meta.requestStatus === 'fulfilled') { + history.push('/control'); + } }; - // 로그인 성공시 메인화면으로 이동 - useEffect(() => { - if (isLogin) { - // LANCC 화면으로 이동 - props.history.replace('/control'); - } - }, [isLogin]); return ( <>
@@ -106,7 +100,6 @@ export const AccountLogin = ({ props }) => { placeholder='ID' name='userId' value={loginForm.userId} - onKeyPress={onKeyPress} onChange={handelrChange} /> @@ -123,13 +116,16 @@ export const AccountLogin = ({ props }) => { type='password' name='userPswd' value={loginForm.userPswd} - onKeyPress={onKeyPress} onChange={handelrChange} />
-
diff --git a/src/containers/basis/dron/BasisDronContainer.js b/src/containers/basis/dron/BasisDronContainer.js index 95efce53..b83c3b16 100644 --- a/src/containers/basis/dron/BasisDronContainer.js +++ b/src/containers/basis/dron/BasisDronContainer.js @@ -17,18 +17,15 @@ import { getJoinGroupList } from '@src/_redux/features/basis/group/groupThunk'; -export const BasisDronContainer = props => { +export const BasisDronContainer = ({ history, user }) => { const dispatch = useDispatch(); - const history = useHistory(); - // 기체 목록, 총 기체 수, 현재 활성화한 그룹 정보 const { droneList, droneTotal, selectGroup } = useSelector( state => state.droneState ); // 유저 정보 - const { user } = useSelector(state => state.authState, shallowEqual); const [params, setParams] = useState({}); const titleName = '기체 관리'; diff --git a/src/containers/basis/group/BasisGroupApprovalContainer.js b/src/containers/basis/group/BasisGroupApprovalContainer.js index 09c8b266..b9bcd613 100644 --- a/src/containers/basis/group/BasisGroupApprovalContainer.js +++ b/src/containers/basis/group/BasisGroupApprovalContainer.js @@ -14,13 +14,10 @@ import { } from '@src/_redux/features/basis/group/groupThunk'; import { clientSelectAprvGroup } from '@src/_redux/features/basis/group/groupSlice'; -export const BasisGroupApprovalContainer = props => { +export const BasisGroupApprovalContainer = ({ user }) => { const dispatch = useDispatch(); const titleName = '승인관리'; - // 유저 정보 - const { user } = useSelector(state => state.authState); - // 검색 조건 초기값 const [params, setParams] = useState({ cstmrSno: user?.cstmrSno, diff --git a/src/containers/basis/group/BasisGroupContainer.js b/src/containers/basis/group/BasisGroupContainer.js index ae75d2d5..3ca42482 100644 --- a/src/containers/basis/group/BasisGroupContainer.js +++ b/src/containers/basis/group/BasisGroupContainer.js @@ -12,9 +12,9 @@ import { leaveGroup } from '@src/_redux/features/basis/group/groupThunk'; -export const BasisGroupContainer = props => { +export const BasisGroupContainer = ({ history, user }) => { const dispatch = useDispatch(); - const history = useHistory(); + const titleName = '나의 그룹'; const [saveParams, setSaveParams] = useState({}); @@ -23,9 +23,6 @@ export const BasisGroupContainer = props => { state => state.groupState ); - // 유저 정보 - const { user } = useSelector(state => state.authState); - //모달 관련 설정 const [modal, setModal] = useState({ isOpen: false, diff --git a/src/containers/basis/group/BasisGroupDetailContainer.js b/src/containers/basis/group/BasisGroupDetailContainer.js index 77714701..906bf76a 100644 --- a/src/containers/basis/group/BasisGroupDetailContainer.js +++ b/src/containers/basis/group/BasisGroupDetailContainer.js @@ -12,7 +12,7 @@ import { updateGroup } from '@src/_redux/features/basis/group/groupThunk'; -export const BasisGroupDetailContainer = () => { +export const BasisGroupDetailContainer = ({ user }) => { const dispatch = useDispatch(); const { id } = useParams(); @@ -21,9 +21,6 @@ export const BasisGroupDetailContainer = () => { // 그룹 상세정보, 그룹 랜덤 ID const { groupDetail, newGroupId } = useSelector(state => state.groupState); - // 유저 정보 - const { user } = useSelector(state => state.authState); - // 그룹 초기 데이터 const [groupData, setGroupData] = useState({ type: 'create', diff --git a/src/containers/basis/group/BasisGroupDetailJoinContainer.js b/src/containers/basis/group/BasisGroupDetailJoinContainer.js index 08fd3d3b..3ae11cb2 100644 --- a/src/containers/basis/group/BasisGroupDetailJoinContainer.js +++ b/src/containers/basis/group/BasisGroupDetailJoinContainer.js @@ -10,13 +10,10 @@ import { joinGroup } from '@src/_redux/features/basis/group/groupThunk'; -export const BasisGroupDetailJoinContainer = props => { +export const BasisGroupDetailJoinContainer = ({ user }) => { const dispatch = useDispatch(); const titleName = '그룹가입'; - // 유저 정보 - const { user } = useSelector(state => state.authState); - // 그룹가입목록, 그룹가입목록 수 const { joinList, joinListCount } = useSelector(state => state.groupState); diff --git a/src/containers/basis/group/BasisGroupUsersContainer.js b/src/containers/basis/group/BasisGroupUsersContainer.js index 74dd234f..8ce7ec15 100644 --- a/src/containers/basis/group/BasisGroupUsersContainer.js +++ b/src/containers/basis/group/BasisGroupUsersContainer.js @@ -15,7 +15,7 @@ import { } from '@src/_redux/features/basis/group/groupThunk'; import { clientSelectUserGroup } from '@src/_redux/features/basis/group/groupSlice'; -export const BasisGroupUsersContainer = props => { +export const BasisGroupUsersContainer = ({ user }) => { const dispatch = useDispatch(); const titleName = '사용자 관리'; @@ -30,9 +30,6 @@ export const BasisGroupUsersContainer = props => { count } = useSelector(state => state.groupState); - // 유저 정보 - const { user } = useSelector(state => state.authState); - /** * 검색 조건 초기값 * cstmrSno: 유저고유번호 diff --git a/src/containers/main/dash/MainDashContainer.js b/src/containers/main/dash/MainDashContainer.js index a5370519..45856196 100644 --- a/src/containers/main/dash/MainDashContainer.js +++ b/src/containers/main/dash/MainDashContainer.js @@ -10,7 +10,7 @@ import { DashboardStcsDay } from '../../../components/dashboard/DashboardStcsDay import * as Actions from '../../../_redux/features/dashboard/dashboardThunk'; import { MessageErrorModal } from '../../../components/message/MessageErrorModal'; -export const MainDashContainer = () => { +export const MainDashContainer = ({ history, user }) => { const dispatch = useDispatch(); /* stcsDayList : 일 별 비행횟수 @@ -23,11 +23,9 @@ export const MainDashContainer = () => { const { stcsDayList, stcsAreaList } = useSelector( state => state.dashboardState ); - const { user } = useSelector(state => state.authState); const [dayStartDate, setDayStartDate] = useState(new Date()); const [areaStartDate, setAreaStartDate] = useState(new Date()); - const history = useHistory(); useEffect(() => { // 일일 비행계획 현황, 일일 비행건수 현황, 일일 비정상상황 현황 Promise.all 처리 diff --git a/src/modules/account/auth/service/jwtTokenUtil.ts b/src/modules/account/auth/service/jwtTokenUtil.ts index 816bdc21..af8c31f8 100644 --- a/src/modules/account/auth/service/jwtTokenUtil.ts +++ b/src/modules/account/auth/service/jwtTokenUtil.ts @@ -25,7 +25,7 @@ export const getAccessToken = async () => { let token = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN); if (!token || token == undefined || token == 'undefined') { - store.dispatch(Actions.setLogout.request()); + // store.dispatch(Actions.setLogout.request()); return ''; } diff --git a/src/modules/utils/customAxiosUtil.ts b/src/modules/utils/customAxiosUtil.ts index a7da254e..65ccbd24 100644 --- a/src/modules/utils/customAxiosUtil.ts +++ b/src/modules/utils/customAxiosUtil.ts @@ -1,4 +1,4 @@ -import axios from 'axios'; +import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'; import { HOST } from '../../configs/constants'; import { getAccessToken } from '../account/auth/service/jwtTokenUtil'; import { store } from './../../redux/storeConfig/store'; @@ -37,22 +37,10 @@ clientInstance.interceptors.response.use( store.dispatch(clientLoaded()); return response.data; }, - error => { - // const message = error?.message || ''; - - // const name = error?.name || ''; - - // if (error?.response?.status == 401) { - // let refreshToken = await refreshTokenAPI(userData.cstmrSno,getRefreshToken()); - // store.dispatch( - // Actions.refresh.request({ - // cstmrSno: userData.cstmrSno, - // refreshToken: getRefreshToken() - // }) - // ); - //store.dispatch(Actions.setLogout.request()); - // } else { - // } + (error: AxiosError) => { + const { message } = error; + const { method, url } = error.config as AxiosRequestConfig; + const { status, statusText } = error.response as AxiosResponse; return Promise.reject(error); } diff --git a/src/router/hoc/authenticationCheck.tsx b/src/router/hoc/authenticationCheck.tsx index 2a5bb5ac..dde559eb 100644 --- a/src/router/hoc/authenticationCheck.tsx +++ b/src/router/hoc/authenticationCheck.tsx @@ -1,51 +1,51 @@ import { ReactNode, useEffect } from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { useSelector, useDispatch } from '@store/storeConfig/store'; -import * as Actions from '../../modules/account/auth/actions'; -import clientInstance from '../../modules/utils/customAxiosUtil'; -import { checkCookie } from '@src/_redux/features/account/auth/authThunk'; -import { MessageModal } from '@src/components/message/MessageModal'; -import { MessageErrorModal } from '@src/components/message/MessageErrorModal'; -import { MessageInfoModal } from '@src/components/message/MessageInfoModal'; +import { checkToken } from '@src/_redux/features/account/auth/authThunk'; +import { ICheckAuthencationRs } from '@src/_redux/features/account/auth/authState'; interface IOption { authRoute?: boolean; } +interface IProps extends RouteComponentProps { + user?: ICheckAuthencationRs; +} + export default function (SpecificComponent: ReactNode, option: IOption) { function AuthenticationCheck(props: RouteComponentProps) { - const user = useSelector(state => state.authState.user); const dispatch = useDispatch(); + const { user } = useSelector(state => state.authState); 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.replace('/account/login'); + const { + payload: { result } + } = await dispatch(checkToken() as any); + console.log(result); + console.log(authRoute); + if (!result) { + if (authRoute) props.history.push('/account/login'); + } else { + if (!authRoute) { + props.history.replace('/main/dashboard'); } - dispatch(checkCookie()); - // dispatch(Actions.checkAuthencation.request()); } } catch (error) { - props.history.replace('/account/login'); + // props.history.replace('/account/login'); } }; tokenVerification(); }, []); - const Component: (props: RouteComponentProps) => JSX.Element = - SpecificComponent as (props: RouteComponentProps) => JSX.Element; + const Component: (props: IProps) => JSX.Element = SpecificComponent as ( + props: IProps + ) => JSX.Element; - return ( - <> - - - ); + return ; } return AuthenticationCheck; } diff --git a/src/views/account/AccountLoginView.js b/src/views/account/AccountLoginView.js index 0710d918..da66abdd 100644 --- a/src/views/account/AccountLoginView.js +++ b/src/views/account/AccountLoginView.js @@ -1,6 +1,6 @@ import { AccountLogin } from '../../components/account/login/AccountLogin'; const AccountLoginView = props => { - return ; + return ; }; export default AccountLoginView; diff --git a/src/views/basis/dron/BasisDron.js b/src/views/basis/dron/BasisDron.js index a3f4298f..e76b06cb 100644 --- a/src/views/basis/dron/BasisDron.js +++ b/src/views/basis/dron/BasisDron.js @@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss'; import '../../../assets/css/custom.css'; import { BasisDronContainer } from '../../../containers/basis/dron/BasisDronContainer'; -const BasisDron = () => { +const BasisDron = props => { return (
- + {/* */} {/* */}
diff --git a/src/views/basis/group/BasisGroup.js b/src/views/basis/group/BasisGroup.js index 2a32f3a9..b82f19d8 100644 --- a/src/views/basis/group/BasisGroup.js +++ b/src/views/basis/group/BasisGroup.js @@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss'; import '../../../assets/css/custom.css'; import { BasisGroupContainer } from '../../../containers/basis/group/BasisGroupContainer'; -const BasisGroup = () => { +const BasisGroup = props => { return (
- +
); }; diff --git a/src/views/basis/group/BasisGroupAproval.js b/src/views/basis/group/BasisGroupAproval.js index b17ee9ed..c709deff 100644 --- a/src/views/basis/group/BasisGroupAproval.js +++ b/src/views/basis/group/BasisGroupAproval.js @@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss'; import '../../../assets/css/custom.css'; import { BasisGroupApprovalContainer } from '../../../containers/basis/group/BasisGroupApprovalContainer'; -const BasisGroupAproval = () => { +const BasisGroupAproval = props => { return (
- +
); }; diff --git a/src/views/basis/group/BasisGroupDetail.js b/src/views/basis/group/BasisGroupDetail.js index 1401797f..2e34a1e0 100644 --- a/src/views/basis/group/BasisGroupDetail.js +++ b/src/views/basis/group/BasisGroupDetail.js @@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss'; import '../../../assets/css/custom.css'; import { BasisGroupDetailContainer } from '../../../containers/basis/group/BasisGroupDetailContainer'; -const BasisGroupDetail = () => { +const BasisGroupDetail = props => { return (
- +
); }; diff --git a/src/views/basis/group/BasisGroupDetailJoin.js b/src/views/basis/group/BasisGroupDetailJoin.js index 4f954d1f..379af447 100644 --- a/src/views/basis/group/BasisGroupDetailJoin.js +++ b/src/views/basis/group/BasisGroupDetailJoin.js @@ -4,10 +4,10 @@ import '../../../assets/css/custom.css'; import { BasisGroupDetailJoinContainer } from '../../../containers/basis/group/BasisGroupDetailJoinContainer'; -const BasisGroupDetailJoin = () => { +const BasisGroupDetailJoin = props => { return (
- +
); }; diff --git a/src/views/basis/group/BasisGroupUsers.js b/src/views/basis/group/BasisGroupUsers.js index b08db3c5..4ad2e308 100644 --- a/src/views/basis/group/BasisGroupUsers.js +++ b/src/views/basis/group/BasisGroupUsers.js @@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss'; import '../../../assets/css/custom.css'; import { BasisGroupUsersContainer } from '../../../containers/basis/group/BasisGroupUsersContainer'; -const BasisGroupUsers = () => { +const BasisGroupUsers = props => { return (
- +
); }; diff --git a/src/views/main/MainDashboard.js b/src/views/main/MainDashboard.js index fec45d84..13d2e702 100644 --- a/src/views/main/MainDashboard.js +++ b/src/views/main/MainDashboard.js @@ -10,7 +10,7 @@ const MainDashboard = props => { {/* 메인보드 */} - + ); };