From c7ddfa3cbe1f095d3d55eda4372c597ec4744d28 Mon Sep 17 00:00:00 2001 From: kimsuyeon0916 Date: Mon, 8 Jul 2024 05:56:30 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20#111=20=ED=86=A0=ED=81=B0=20=EC=9E=AC?= =?UTF-8?q?=EB=B0=9C=EA=B8=89=20API=20=EC=97=94=EB=93=9C=ED=8F=AC=EC=9D=B8?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/accountDelete/AccountDelete.tsx | 2 ++ src/env.d.ts | 1 + src/hooks/useAuth.ts | 8 ++++++-- src/service/auth/auth.ts | 12 +++++++++++ src/service/axiosInstance.ts | 20 +++++++++++++++++++ src/service/endPoint.ts | 1 + src/service/index.ts | 2 ++ 7 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/components/recruit/recruitDetail/modal/accountDelete/AccountDelete.tsx b/src/components/recruit/recruitDetail/modal/accountDelete/AccountDelete.tsx index accd0abe..78a46c79 100644 --- a/src/components/recruit/recruitDetail/modal/accountDelete/AccountDelete.tsx +++ b/src/components/recruit/recruitDetail/modal/accountDelete/AccountDelete.tsx @@ -7,6 +7,7 @@ import { withdrawAccount } from '../../../../../service'; import secureLocalStorage from 'react-secure-storage'; const ACCESS_TOKEN_KEY = import.meta.env.VITE_ACCESS_TOKEN_KEY; +const REFRESH_TOKEN_KEY = import.meta.env.VITE_REFRESH_TOKEN_KEY; const PLATFORM_ID = import.meta.env.VITE_PLATFORM_ID; const AccountDelete = () => { @@ -22,6 +23,7 @@ const AccountDelete = () => { setUserState(null); queryClient.clear(); secureLocalStorage.removeItem(ACCESS_TOKEN_KEY); + secureLocalStorage.removeItem(REFRESH_TOKEN_KEY); secureLocalStorage.removeItem(PLATFORM_ID); }, }); diff --git a/src/env.d.ts b/src/env.d.ts index 947e9641..b6362cbb 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -2,6 +2,7 @@ interface ImportMeta { env: { VITE_BASE_URL: string; VITE_ACCESS_TOKEN_KEY: string; + VITE_REFRESH_TOKEN_KEY: string; VITE_NAVER_CLIENT_ID: string; VITE_NAVER_STATE: string; VITE_NAVER_CALLBACK_URL: string; diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index 20e51b8d..256dc9ef 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -13,6 +13,7 @@ import { User } from '../types'; import secureLocalStorage from 'react-secure-storage'; const ACCESS_TOKEN_KEY = import.meta.env.VITE_ACCESS_TOKEN_KEY; +const REFRESH_TOKEN_KEY = import.meta.env.VITE_REFRESH_TOKEN_KEY; const PLATFORM_ID = import.meta.env.VITE_PLATFORM_ID; @@ -36,8 +37,9 @@ export const useCheckExist = ({ onSuccess, setUserState, setLoginState }: AuthPr return useMutation({ mutationFn: checkExist, onSuccess: data => { - if (data?.accessToken) { + if (data?.accessToken && data?.refreshToken) { secureLocalStorage.setItem(ACCESS_TOKEN_KEY, data.accessToken); + secureLocalStorage.setItem(REFRESH_TOKEN_KEY, data.refreshToken); setUserState?.({ userId: data.userId, nickname: data.nickname, @@ -61,9 +63,10 @@ export const useNaverSignUp = ({ onSuccess, setUserState, setLoginState }: AuthP return useMutation({ mutationFn: signUp, onSuccess: data => { - if (data?.accessToken) { + if (data?.accessToken && data?.refreshToken) { secureLocalStorage.removeItem(PLATFORM_ID); secureLocalStorage.setItem(ACCESS_TOKEN_KEY, data.accessToken); + secureLocalStorage.setItem(REFRESH_TOKEN_KEY, data.refreshToken); setUserState?.({ userId: data.userId, nickname: data.nickname, @@ -131,6 +134,7 @@ export const useSignOut = ({ onSuccess, setUserState, setLoginState }: AuthProps mutationFn: signOut, onSuccess: () => { secureLocalStorage.removeItem(ACCESS_TOKEN_KEY); + secureLocalStorage.removeItem(REFRESH_TOKEN_KEY); setUserState?.(null); setLoginState?.(false); onSuccess?.(); diff --git a/src/service/auth/auth.ts b/src/service/auth/auth.ts index eb87002a..9b5e559f 100644 --- a/src/service/auth/auth.ts +++ b/src/service/auth/auth.ts @@ -1,5 +1,6 @@ import type { Department, SignUpPayload, University, UserReponse } from '../../types'; import { EndPoint, axiosAuthInstance, axiosInstance } from '..'; +import axios from 'axios'; const platformType = 'NAVER'; @@ -116,3 +117,14 @@ export const withdrawAccount = async () => { console.error(error); } }; + +export const issueToken = async () => { + try { + const response = await axios.post(EndPoint.ISSUE); + + return response; + } catch (error) { + console.error(error); + return null; + } +}; diff --git a/src/service/axiosInstance.ts b/src/service/axiosInstance.ts index 28f075ea..bdfff717 100644 --- a/src/service/axiosInstance.ts +++ b/src/service/axiosInstance.ts @@ -2,6 +2,7 @@ import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'ax import { CustomInstance } from '../types'; import qs from 'qs'; import secureLocalStorage from 'react-secure-storage'; +import { issueToken } from './'; const axiosConfig = { baseURL: import.meta.env.VITE_BASE_URL, @@ -11,6 +12,7 @@ const axiosConfig = { }; const ACCESS_TOKEN_KEY = import.meta.env.VITE_ACCESS_TOKEN_KEY; +const REFRESH_TOKEN_KEY = import.meta.env.VITE_REFRESH_TOKEN_KEY; export const axiosInstance: CustomInstance = axios.create(axiosConfig); export const axiosAuthInstance: CustomInstance = axios.create(axiosConfig); @@ -23,6 +25,16 @@ axiosAuthInstance.defaults.paramsSerializer = params => { return qs.stringify(params, { arrayFormat: 'repeat' }); }; +const reissueToken = () => { + issueToken().then(async res => { + if (res?.status === 200 && res.data.accessToken && res.data.refreshToken) { + secureLocalStorage.setItem(ACCESS_TOKEN_KEY, res.data.accessToken); + secureLocalStorage.setItem(REFRESH_TOKEN_KEY, res.data.refreshToken); + onRequest(res.config); + } + }); +}; + const onResponse = (response: AxiosResponse): AxiosResponse => { return response.data; }; @@ -34,6 +46,14 @@ const onError = (error: AxiosError) => { console.error(response.data); } + if (error.config && response?.status === 403) { + const refreshToken = secureLocalStorage.getItem(REFRESH_TOKEN_KEY); + + error.config.headers.Authorization = `Bearer ${refreshToken}`; + + return reissueToken(); + } + return Promise.reject(error); }; diff --git a/src/service/endPoint.ts b/src/service/endPoint.ts index 4f9115cb..7eeebe6f 100644 --- a/src/service/endPoint.ts +++ b/src/service/endPoint.ts @@ -13,6 +13,7 @@ export const EndPoint = { }, SIGN_OUT: '/auth/logout', WITHDRAW: '/user', + ISSUE: '/auth/reissue', /* profile */ PROFILE: { diff --git a/src/service/index.ts b/src/service/index.ts index 19915fc0..94387371 100644 --- a/src/service/index.ts +++ b/src/service/index.ts @@ -9,6 +9,7 @@ import { readDepartmentList, signOut, withdrawAccount, + issueToken, } from './auth/auth'; import { getPostingData, @@ -80,4 +81,5 @@ export { deletePostingRecruit, readProfileImage, withdrawAccount, + issueToken, };