Merge pull request #85 from wafflestudio/bug/refresh

refresh 시 로그인 풀리는 이슈 수정

Author: h-seo-n

src/api/axios.ts

@@ -3,6 +3,18 @@ import { TokenService } from "./tokenService";
 
 const API_URL = import.meta.env.VITE_API_URL || "";
 
+let isRefreshing = false;
+let refreshSubscribers: ((token: string) => void)[] = [];
+
+const onRefreshed = (accessToken: string) => {
+    refreshSubscribers.forEach((callback) => callback(accessToken));
+    refreshSubscribers = [];
+};
+
+const addRefreshSubscriber = (callback: (token: string) => void) => {
+    refreshSubscribers.push(callback);
+};
+
 const api = axios.create({
 	baseURL: API_URL,
 	withCredentials: true,
@@ -54,7 +66,17 @@ api.interceptors.response.use(
 		}
 
 		if (error.response?.status === 401 && !originalRequest._retry) {
+			if (isRefreshing) {
+                return new Promise((resolve) => {
+                    addRefreshSubscriber((token: string) => {
+                        originalRequest.headers.Authorization = `Bearer ${token}`;
+                        resolve(api(originalRequest));
+                    });
+                });
+            }
+			
 			originalRequest._retry = true;
+			isRefreshing = true;
 
 			try {
 				const { data } = await axios.post<{ accessToken: string }>(
@@ -65,14 +87,19 @@ api.interceptors.response.use(
 
 				// update storage
 				TokenService.setToken(data.accessToken);
-
+				
+				isRefreshing = false;
+				onRefreshed(data.accessToken);
+				
 				// update header
 				originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
 
 				// retry original request
 				return api(originalRequest);
 			} catch (refreshError) {
 				// refresh failed :
+				isRefreshing = false;
+                refreshSubscribers = [];
 				TokenService.clearTokens();
 				console.error("Session expired. Please sign in again");
 				return Promise.reject(refreshError);

src/contexts/AuthProvider.tsx

@@ -57,12 +57,15 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 	/**
 	 * INIT : check for existing session on page load
 	 */
+	const isInitRunning = useRef(false);
 	useEffect(() => {
 		if (window.location.pathname === '/auth/callback') {
         	setIsLoading(false);
         	return;
     	}
 		const initAuth = async () => {
+			if (isInitRunning.current) return;
+            isInitRunning.current = true;
 			try {
 				const restoredUser = await auth.refresh();