Merge pull request #67 from Team-INSERT/fix/token

액세스 토큰 재발급 오류 수정

src/apis/error/throwAxiosError.ts

@@ -1,20 +1,11 @@
 import { isAxiosError } from "axios";
-import { toast } from "react-toastify";
 
 const throwAxiosError = (err: unknown) => {
-  if (!isAxiosError(err))
-    return {
-      data: "",
-      status: "",
-      message: "",
-    };
+  if (isAxiosError(err) && err.response) {
+    const { code, status, message } = err.response.data;
 
-  const data = err?.response?.data;
-  const { code, status, message } = data;
-  console.log(err);
-  toast.error("오류가 발생했습니다.");
-
-  return { code, status, message };
+    return { code, status, message };
+  }
 };
 
 export default throwAxiosError;

src/apis/httpClient/httpClient.ts

@@ -1,8 +1,8 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
 import { requestInterceptors, responseInterceptors } from "@/apis/interceptor";
-import { KEY, TOKEN } from "@/constants/";
-import { QueryClient } from "@tanstack/react-query";
+import { ERROR, TOKEN } from "@/constants/";
 import Storage from "../storage";
+import { refresh } from "../token";
 
 export interface HttpClientConfig {
   baseURL?: string;
@@ -22,9 +22,7 @@ export class HttpClient {
       withCredentials: true,
     });
     HttpClient.clientConfig = {
-      headers: {
-        Authorization: Storage.getItem(TOKEN.ACCESS) || "",
-      },
+      headers: { Authorization: Storage.getItem(TOKEN.ACCESS) || "" },
     };
     this.setting();
   }
@@ -125,15 +123,15 @@ export class HttpClient {
 
   private setting() {
     HttpClient.setCommonInterceptors(this.api);
-    const queryClient = new QueryClient();
 
     this.api.interceptors.response.use(
       (response) => response,
       (error) => {
-        queryClient.invalidateQueries([
-          KEY.USER,
-          Storage.getItem(TOKEN.ACCESS),
-        ]);
+        if (error.response) {
+          const { code } = error.response.data;
+
+          if (code === ERROR.CODE.TOKEN_403_2) refresh();
+        }
         return Promise.reject(error);
       },
     );

src/apis/interceptor/index.ts

@@ -1,10 +1,9 @@
 import { AxiosRequestConfig, AxiosResponse } from "axios";
-import { TOKEN } from "@/constants";
-import Storage from "../storage";
+import { getToken } from "@/helpers";
 
 export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
   const urlParams = requestConfig.url?.split("/:") || [];
-  const accessToken = Storage.getItem(TOKEN.ACCESS);
+  const accessToken = getToken();
 
   if (accessToken && requestConfig.headers)
     requestConfig.headers.Authorization = accessToken;

src/apis/token/authorization.ts

@@ -1,9 +1,8 @@
-import Storage from "@/apis/storage";
-import { TOKEN } from "@/constants";
+import { getToken } from "@/helpers";
 
 const authorization = () => ({
   headers: {
-    Authorization: `Bearer ${Storage.getItem(TOKEN.ACCESS)}`,
+    Authorization: `Bearer ${getToken()}`,
   },
 });
 

src/apis/token/refresh.ts

@@ -1,16 +1,16 @@
 import { TOKEN } from "@/constants/";
 import Storage from "@/apis/storage";
-import httpClient from "../httpClient";
+import axios from "axios";
+
+const instance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+});
 
 const refresh = async () => {
-  try {
-    const { data } = await httpClient.refresh.put({
-      refreshToken: `${Storage.getItem(TOKEN.REFRESH)}`,
-    });
-    Storage.setItem(TOKEN.ACCESS, data.accessToken);
-  } catch (err) {
-    Storage.clear();
-  }
+  const { data } = await instance.put("/api/auth/refresh/access", {
+    refreshToken: `${Storage.getItem(TOKEN.REFRESH)}`,
+  });
+  Storage.setItem(TOKEN.ACCESS, data.accessToken);
 };
 
 export default refresh;

src/hooks/useUser.ts

@@ -26,11 +26,11 @@ const useUser = (options?: UseUserOptions) => {
   const {
     data: userInfo,
     remove,
-    isLoading,
     error,
     refetch,
+    isLoading,
   } = useQuery<IUser>(
-    [KEY.USER, Storage.getItem(TOKEN.ACCESS)],
+    [KEY.USER],
     async () => {
       const { data } = await httpClient.user.get(authorization());
       return data;
@@ -47,7 +47,6 @@ const useUser = (options?: UseUserOptions) => {
   React.useEffect(() => {
     if (isAxiosError(error) && error.response) {
       const { code } = error.response.data;
-
       if (code === ERROR.CODE.TOKEN_403_2) refresh().then(() => refetch());
     }
   }, [error, refetch]);