diff --git a/frontend/src/api/ApiClient.ts b/frontend/src/api/ApiClient.ts index c79b7e4e7..a9328976f 100644 --- a/frontend/src/api/ApiClient.ts +++ b/frontend/src/api/ApiClient.ts @@ -37,6 +37,11 @@ export class ApiClient { this.credentials = credentials || 'same-origin'; } + private getAuthorizationHeader(): HeadersInit { + const token = localStorage.getItem('authorization'); + return token ? { Authorization: token } : {}; + } + async get(endpoint: string, params?: RequestParams): Promise { const url = new URL(`${this.baseUrl}${endpoint}`); @@ -63,7 +68,10 @@ export class ApiClient { try { const response = await fetch(url, { method, - headers: this.headers, + headers: { + ...this.headers, + ...this.getAuthorizationHeader(), + }, credentials: this.credentials, body: body ? JSON.stringify(body) : null, }); @@ -83,13 +91,14 @@ export class ApiClient { } private async handleError(response: Response) { - const { errorCode, instance, detail } = await response.json(); - if (response.status === HTTP_STATUS.UNAUTHORIZED) { + localStorage.removeItem('authorization'); localStorage.removeItem('name'); localStorage.removeItem('memberId'); } + const { errorCode, instance, detail } = await response.json(); + throw new ApiError(getErrorMessage(errorCode, instance), response.status, errorCode, detail); } } diff --git a/frontend/src/api/authentication.ts b/frontend/src/api/authentication.ts index fccd25713..462d95e98 100644 --- a/frontend/src/api/authentication.ts +++ b/frontend/src/api/authentication.ts @@ -4,11 +4,7 @@ import type { LoginRequest, SignupRequest } from '@/types'; export const postSignup = async (signupInfo: SignupRequest) => await apiClient.post(END_POINTS.SIGNUP, signupInfo); -export const postLogin = async (loginInfo: LoginRequest) => { - const response = await apiClient.post(END_POINTS.LOGIN, loginInfo); - - return await response.json(); -}; +export const postLogin = async (loginInfo: LoginRequest) => await apiClient.post(END_POINTS.LOGIN, loginInfo); export const postLogout = async () => await apiClient.post(END_POINTS.LOGOUT, {}); diff --git a/frontend/src/api/config.ts b/frontend/src/api/config.ts index 2abb2c2ec..6458adc6e 100644 --- a/frontend/src/api/config.ts +++ b/frontend/src/api/config.ts @@ -4,7 +4,6 @@ export const API_URL = process.env.REACT_APP_API_URL ?? 'https://default-url.com const httpHeader = { 'Content-Type': 'application/json', -}; -const httpCredentials = 'include'; +} -export const apiClient = new ApiClient(API_URL, httpHeader, httpCredentials); +export const apiClient = new ApiClient(API_URL, httpHeader); diff --git a/frontend/src/queries/authentication/useLoginMutation.ts b/frontend/src/queries/authentication/useLoginMutation.ts index d9c8b2e96..bb686fcba 100644 --- a/frontend/src/queries/authentication/useLoginMutation.ts +++ b/frontend/src/queries/authentication/useLoginMutation.ts @@ -12,15 +12,19 @@ export const useLoginMutation = () => { const { failAlert, successAlert } = useCustomContext(ToastContext); const navigate = useCustomNavigate(); - return useMutation({ + return useMutation({ mutationFn: (loginInfo: LoginRequest) => postLogin(loginInfo), - onSuccess: (res) => { - const { memberId, name } = res; + onSuccess: async (res) => { + const authorization = res.headers.get('authorization'); + + const response = await res.json() as MemberInfo; + const { memberId, name } = response; if (memberId && name) { localStorage.setItem('name', String(name)); localStorage.setItem('memberId', String(memberId)); - handleMemberInfo(res); + localStorage.setItem('authorization', String(authorization)); + handleMemberInfo({ memberId, name }); handleLoginState(true); successAlert('로그인 성공!'); navigate(END_POINTS.memberTemplates(memberId)); diff --git a/frontend/src/queries/authentication/useLogoutMutation.ts b/frontend/src/queries/authentication/useLogoutMutation.ts index 250ca6a36..cb227a766 100644 --- a/frontend/src/queries/authentication/useLogoutMutation.ts +++ b/frontend/src/queries/authentication/useLogoutMutation.ts @@ -14,6 +14,7 @@ export const useLogoutMutation = () => { onSuccess: () => { localStorage.removeItem('name'); localStorage.removeItem('memberId'); + localStorage.removeItem('authorization'); handleLoginState(false); successAlert('로그아웃 성공!'); },