요청 헤더에 Authorization 필드 추가 (#1026)

woowacourse-teams · Jan 12, 2025 · ecf28c6 · ecf28c6
1 parent b1692dc
commit ecf28c6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 deletions.
diff --git 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<Response> {
     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
@@ -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
@@ -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
@@ -12,15 +12,19 @@ export const useLoginMutation = () => {
   const { failAlert, successAlert } = useCustomContext(ToastContext);
   const navigate = useCustomNavigate();
 
-  return useMutation<MemberInfo, Error, LoginRequest>({
+  return useMutation<Response, Error, LoginRequest>({
     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
@@ -14,6 +14,7 @@ export const useLogoutMutation = () => {
     onSuccess: () => {
       localStorage.removeItem('name');
       localStorage.removeItem('memberId');
+      localStorage.removeItem('authorization');
       handleLoginState(false);
       successAlert('로그아웃 성공!');
     },