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

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

Author: Ubinquitous

src/apis/error/throwAxiosError.ts

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

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;
@@ -132,16 +132,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),
-        ]);
-        return Promise.reject(error);
+      async (error) => {
+        const originalRequest = error.config;
+        if (error.response.data.code === ERROR.CODE.TOKEN_403_2) {
+          await refresh();
+          return this.api(originalRequest);
+        }
       },
     );
   }
@@ -164,7 +163,6 @@ export default {
   post: new HttpClient("api/post/", axiosConfig),
   recomment: new HttpClient("api/recomment", axiosConfig),
   comment: new HttpClient("api/comment", axiosConfig),
-  refresh: new HttpClient("api/auth/refresh/access", axiosConfig),
   auth: new HttpClient("api/auth/", axiosConfig),
   bamboo: new HttpClient("api/bamboo", axiosConfig),
   admin: new HttpClient("api/bamboo/admin", axiosConfig),

src/apis/token/refresh.ts

@@ -1,10 +1,14 @@
 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({
+    const { data } = await instance.put("/api/auth/refresh/access", {
       refreshToken: `${Storage.getItem(TOKEN.REFRESH)}`,
     });
     Storage.setItem(TOKEN.ACCESS, data.accessToken);

src/hooks/useUser.ts

@@ -30,7 +30,7 @@ const useUser = (options?: UseUserOptions) => {
     error,
     refetch,
   } = useQuery<IUser>(
-    [KEY.USER, Storage.getItem(TOKEN.ACCESS)],
+    [KEY.USER],
     async () => {
       const { data } = await httpClient.user.get(authorization());
       return data;