[# 311] 액세스 토큰 리프레시 로직 axios 미들웨어로 처리

src/libs/baseAxios.ts

@@ -1,5 +1,7 @@
 import axios from 'axios';
 import { getCookie } from '@/utils/cookie/getCookie.ts';
+import { refreshAccessToken } from '@/apis/auth/refreshAccessToken.ts';
+import { setCookie } from '@/utils/cookie/setCookie.ts';
 
 export const baseAxios = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
@@ -13,3 +15,26 @@ privateAxios.interceptors.request.use((config) => {
   config.headers.Authorization = `Bearer ${getCookie('access-token')}`;
   return config;
 });
+
+privateAxios.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const refreshToken = getCookie('refresh-token');
+
+    if (refreshToken === '') return Promise.reject(error);
+
+    if (error.response?.status === 401) {
+      // refresh token
+      const response = await refreshAccessToken(getCookie('refresh-token'));
+      const { refreshToken, refreshTokenExpiresIn, accessToken, expiresIn } = response.data;
+      setCookie('access-token', accessToken, expiresIn);
+      setCookie('refresh-token', refreshToken, refreshTokenExpiresIn);
+
+      // retry
+
+      return privateAxios(error.config);
+    }
+
+    return Promise.reject(error);
+  },
+);

src/main.tsx

@@ -19,6 +19,9 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 1000 * 60 * 5,
+      retry: 3,
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+      throwOnError: true,
     },
   },
 });

src/routes/PrivateRoute.tsx

@@ -1,17 +1,18 @@
-import { useCookies } from 'react-cookie';
 import { PropsWithChildren, useEffect } from 'react';
 import useInternalRouter from '@/hooks/useInternalRouter.ts';
+import { useToken } from '@/hooks/useToken.ts';
 
 const PrivateRoute = ({ children }: PropsWithChildren) => {
   const { replace } = useInternalRouter();
-  const [cookies] = useCookies(['access-token']);
-  const token = cookies['access-token'];
+  const { getRefreshToken, getAccessToken, isValidToken } = useToken();
+  const accessToken = getAccessToken();
+  const refreshToken = getRefreshToken();
 
   useEffect(() => {
-    if (!token) {
+    if (!isValidToken(accessToken) && !isValidToken(refreshToken)) {
       replace('/login');
     }
-  }, [token, replace]);
+  }, [accessToken, refreshToken]);
 
   return children;
 };

src/utils/cookie/setCookie.ts

@@ -0,0 +1,6 @@
+export function setCookie(cname: string, cvalue: string, exSeconds: number) {
+  const d = new Date();
+  d.setTime(d.getTime() + exSeconds * 1000);
+  const expires = 'expires=' + d.toUTCString();
+  document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
+}