Merge pull request #199 from Nexters/fix/refresh-token

fix: 인증 만료로 리프래시 무한 호출 로직 수정
Nexters · Sep 27, 2024 · d50dcfd · d50dcfd
2 parents 9ee445d + 541b0ac
commit d50dcfd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 20 deletions.
diff --git a/apps/admin/src/atoms/useAuthAtom.ts b/apps/admin/src/atoms/useAuthAtom.ts
@@ -1,5 +1,6 @@
 import { LOCAL_STORAGE } from '@boolti/api';
 import { atom, useAtom } from 'jotai';
+import { useEffect } from 'react';
 
 const storageMethod = {
   getItem: (key: string, initialValue: string | null) => {
@@ -39,6 +40,26 @@ export const useAuthAtom = () => {
 
   const isLogin = () => !!accessToken && !!refreshToken;
 
+  useEffect(() => {
+    const handler = (e: StorageEvent) => {
+      switch (e.key) {
+        case LOCAL_STORAGE.ACCESS_TOKEN: {
+          setAccessToken(e.newValue);
+          return;
+        }
+        case LOCAL_STORAGE.REFRESH_TOKEN: {
+          setRefreshToken(e.newValue);
+          return;
+        }
+      }
+    };
+    window.addEventListener('storage', handler);
+
+    return () => {
+      window.removeEventListener('storage', handler);
+    };
+  }, [setAccessToken, setRefreshToken]);
+
   return {
     setToken,
     removeToken,

diff --git a/packages/api/src/fetcher.ts b/packages/api/src/fetcher.ts
@@ -1,7 +1,7 @@
 import type { Options, ResponsePromise } from 'ky';
-import ky from 'ky';
+import ky, { HTTPError } from 'ky';
 
-import BooltiHTTPError, { isBooltiHTTPError } from './BooltiHTTPError';
+import { isBooltiHTTPError } from './BooltiHTTPError';
 import { LOCAL_STORAGE } from './constants';
 
 const API_URL = import.meta.env.VITE_BASE_API_URL;
@@ -24,7 +24,6 @@ const postRefreshToken = async () => {
         },
       },
     );
-
     return await response.json<PostRefreshTokenResponse>();
   }
 };
@@ -55,7 +54,6 @@ export const instance = ky.create({
         if (!response.ok && response.status === 401 && !request.url.includes('logout')) {
           try {
             const { accessToken, refreshToken } = (await postRefreshToken()) ?? {};
-
             if (accessToken && refreshToken) {
               window.localStorage.setItem(LOCAL_STORAGE.ACCESS_TOKEN, accessToken);
               window.localStorage.setItem(LOCAL_STORAGE.REFRESH_TOKEN, refreshToken);
@@ -64,24 +62,26 @@ export const instance = ky.create({
 
               return ky(request, options);
             }
-          } catch (error) {
-            throw new BooltiHTTPError(response, request, options);
-          }
-        }
-
-        if (!response.ok) {
-          const body = await response.json();
-
-          if (body) {
-            throw new BooltiHTTPError(response, request, options, {
-              errorTraceId: body.errorTraceId,
-              type: body.type,
-              detail: body.detail,
-            });
+          } catch (e) {
+            if (e instanceof HTTPError && e.response.url.includes('/login/refresh')) {
+              window.localStorage.removeItem(LOCAL_STORAGE.ACCESS_TOKEN);
+              window.localStorage.removeItem(LOCAL_STORAGE.REFRESH_TOKEN);
+              window.dispatchEvent(
+                new StorageEvent('storage', {
+                  key: LOCAL_STORAGE.REFRESH_TOKEN,
+                  newValue: undefined,
+                }),
+              );
+              window.dispatchEvent(
+                new StorageEvent('storage', {
+                  key: LOCAL_STORAGE.ACCESS_TOKEN,
+                  newValue: undefined,
+                }),
+              );
+            }
           }
-
-          throw new BooltiHTTPError(response, request, options);
         }
+        return response;
       },
     ],
   },