From 2ec98c0ecec15c386d90dfa71012f68d2a1d48b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= Date: Fri, 13 Sep 2024 12:25:00 +0900 Subject: [PATCH] =?UTF-8?q?Fix:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/axiosConfig.ts | 15 +++++---- frontend/src/components/Home/index.tsx | 31 +++++++++---------- .../src/components/OAuthCallback/index.tsx | 6 ++-- frontend/src/router/index.tsx | 4 +-- frontend/src/stores/useAuthStore.ts | 1 - 5 files changed, 26 insertions(+), 31 deletions(-) diff --git a/frontend/src/api/axiosConfig.ts b/frontend/src/api/axiosConfig.ts index ee0cb3a..d97b95a 100644 --- a/frontend/src/api/axiosConfig.ts +++ b/frontend/src/api/axiosConfig.ts @@ -30,9 +30,9 @@ const processQueue = (error: Error | null, token: string | undefined = undefined }; api.interceptors.request.use((config: InternalAxiosRequestConfig) => { - const token = sessionStorage.getItem('accessToken'); - if (token && config.headers) { - config.headers.Authorization = `Bearer ${token}`; + const accessToken = useAuthStore.getState().accessToken; + if (accessToken && config.headers) { + config.headers.Authorization = `Bearer ${accessToken}`; } return config; }); @@ -72,13 +72,12 @@ api.interceptors.response.use( } useAuthStore.getState().setLoggedIn(true, newAccessToken); - sessionStorage.setItem('accessToken', newAccessToken); processQueue(null, newAccessToken); - if (originalRequest.headers) { - originalRequest.headers.Authorization = `Bearer ${newAccessToken}`; - } - return api(originalRequest); + const redirectUri = `/redirect/oauth2?accessToken=${newAccessToken}`; + window.location.href = redirectUri; + + return Promise.reject(new Error('Redirecting to retrieve cookies')); } catch (reissueError: unknown) { processQueue(reissueError as Error, undefined); console.error('토큰 재발급 실패:', reissueError); diff --git a/frontend/src/components/Home/index.tsx b/frontend/src/components/Home/index.tsx index 7fd85d2..9f68949 100644 --- a/frontend/src/components/Home/index.tsx +++ b/frontend/src/components/Home/index.tsx @@ -11,25 +11,22 @@ const DOMAIN = 'https://j11s002.p.ssafy.io'; export default function Home() { const navigate = useNavigate(); - const { isLoggedIn, setLoggedIn, profile, setProfile } = useAuthStore(); + const { isLoggedIn, accessToken, setLoggedIn, profile, setProfile } = useAuthStore(); const hasFetchedProfile = useRef(false); - if (!isLoggedIn && !profile && !hasFetchedProfile.current) { - const accessToken = sessionStorage.getItem('accessToken'); - if (accessToken) { - setLoggedIn(true, accessToken); - fetchProfileApi() - .then((data: SuccessResponse) => { - if (data?.isSuccess && data.data) { - setProfile(data.data); - hasFetchedProfile.current = true; - } - }) - .catch((error: AxiosError) => { - alert('프로필을 가져오는 중 오류가 발생했습니다. 다시 시도해주세요.'); - console.error('프로필 가져오기 실패:', error?.response?.data?.message || '알 수 없는 오류'); - }); - } + if (!isLoggedIn && !profile && !hasFetchedProfile.current && accessToken) { + setLoggedIn(true, accessToken); + fetchProfileApi() + .then((data: SuccessResponse) => { + if (data?.isSuccess && data.data) { + setProfile(data.data); + hasFetchedProfile.current = true; + } + }) + .catch((error: AxiosError) => { + alert('프로필을 가져오는 중 오류가 발생했습니다. 다시 시도해주세요.'); + console.error('프로필 가져오기 실패:', error?.response?.data?.message || '알 수 없는 오류'); + }); } const handleGoogleSignIn = () => { diff --git a/frontend/src/components/OAuthCallback/index.tsx b/frontend/src/components/OAuthCallback/index.tsx index aa1d961..7d8dbfc 100644 --- a/frontend/src/components/OAuthCallback/index.tsx +++ b/frontend/src/components/OAuthCallback/index.tsx @@ -6,6 +6,7 @@ import { fetchProfileApi } from '@/api/authApi'; export default function OAuthCallback() { const navigate = useNavigate(); const setLoggedIn = useAuthStore((state) => state.setLoggedIn); + const setProfile = useAuthStore((state) => state.setProfile); useEffect(() => { const queryParams = new URLSearchParams(window.location.search); @@ -13,7 +14,6 @@ export default function OAuthCallback() { if (accessToken) { setLoggedIn(true, accessToken); - sessionStorage.setItem('accessToken', accessToken); fetchProfileApi() .then((data) => { @@ -23,7 +23,7 @@ export default function OAuthCallback() { nickname: data.data.nickname, profileImage: data.data.profileImage, }; - useAuthStore.getState().setProfile(profileData); + setProfile(profileData); navigate('/browse'); } else { throw new Error('프로필 데이터를 가져올 수 없습니다.'); @@ -37,7 +37,7 @@ export default function OAuthCallback() { } else { navigate('/'); } - }, [navigate, setLoggedIn]); + }, [navigate, setLoggedIn, setProfile]); return

처리 중입니다...

; } diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx index 91f3b6b..278512d 100644 --- a/frontend/src/router/index.tsx +++ b/frontend/src/router/index.tsx @@ -17,7 +17,7 @@ export const webPath = { workspace: () => '/workspace', // workspace: (workspaceId: string, projectId?: string) => // projectId ? `/workspace/${workspaceId}/project/${projectId}` : `/workspace/${workspaceId}`, - admin: (workspaceId: string) => `/admin/${workspaceId}`, + admin: () => `/admin`, oauthCallback: () => '/redirect/oauth2', }; @@ -61,7 +61,7 @@ const router = createBrowserRouter([ ], }, { - path: webPath.admin(':workspaceId'), + path: `${webPath.admin()}/:workspaceId`, element: , children: [ { diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts index 61bff9f..9b631ad 100644 --- a/frontend/src/stores/useAuthStore.ts +++ b/frontend/src/stores/useAuthStore.ts @@ -23,7 +23,6 @@ const useAuthStore = create()( }), { name: 'auth-storage', - getStorage: () => sessionStorage, } ) );