Merge pull request #112 from flowbit-team/bugfix/105

bugfix: #105 소셜로그인 이후 토큰이 있어도 401로 떨어지는 현상해결

Author: minwoo1999

src/api/index.ts

@@ -6,18 +6,25 @@ import axios, {
   AxiosRequestConfig,
   AxiosResponse,
   InternalAxiosRequestConfig,
+  RawAxiosRequestHeaders,
 } from "axios";
 
 /** API 사용 전, ENV 파일을 통해 서버 연동 설정을 해주세요 */
 const API_URL = import.meta.env.VITE_API_URL as string;
 
-const baseApi = axios.create({
-  baseURL: API_URL,
-  timeout: 5000,
+const headers: RawAxiosRequestHeaders = {
+  "Content-Type": "application/json",
+};
 
-  headers: {
-    "Content-Type": "application/json",
-  },
+const token = localStorage.getItem(ACCESS_TOKEN);
+if (token) {
+  headers.Authorization = `Bearer ${token}`;
+}
+
+const axiosInstance = axios.create({
+  baseURL: API_URL,
+  headers,
+  withCredentials: true, // CORS 쿠키 전송을 위해 필요
 });
 
 /** 개발 환경에서만 실행되논 로깅 함수 */
@@ -124,11 +131,11 @@ const onErrorResponse = (error: AxiosError | Error) => {
 };
 
 /** 인터셉터를 설정 하고, Axios Instance를 반환하는 함수 */
-const setInterceptors = (axiosInstance: AxiosInstance): AxiosInstance => {
-  axiosInstance.interceptors.request.use(onRequest, onErrorRequest);
-  axiosInstance.interceptors.response.use(onResponse, onErrorResponse);
+const setInterceptors = (instance: AxiosInstance): AxiosInstance => {
+  instance.interceptors.request.use(onRequest, onErrorRequest);
+  instance.interceptors.response.use(onResponse, onErrorResponse);
 
-  return axiosInstance;
+  return instance;
 };
 
-export const api = setInterceptors(baseApi);
+export const api = setInterceptors(axiosInstance);

src/app/oauth2/redierct/index.tsx

@@ -1,25 +1,30 @@
-import { loginState } from "@/store/user";
-import { ACCESS_TOKEN } from "@/utils/constant";
-import { useSetAtom } from "jotai";
 import { useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import { loginState, tokenState } from "@/store/user";
+import { ACCESS_TOKEN } from "@/utils/constant";
 
 export default function Oauth2Redirect() {
-  const location = useLocation();
   const navigate = useNavigate();
-  const params = new URLSearchParams(location.search);
-  const accessToken = params.get("accessToken");
   const setLogin = useSetAtom(loginState);
+  const setToken = useSetAtom(tokenState);
 
   useEffect(() => {
-    if (accessToken) {
-      localStorage.setItem(ACCESS_TOKEN, accessToken);
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get("token");
+
+    if (token) {
+      localStorage.setItem(ACCESS_TOKEN, token);
+      setToken(token);
       setLogin(true);
       navigate("/");
     } else {
-      alert("오류가 발생했어요, 관리자에게 문의해주세요");
+      // 토큰이 없는 경우 에러 처리
+      setLogin(false);
+      setToken("");
+      navigate("/signin");
     }
-  }, []);
+  }, [navigate, setLogin, setToken]);
 
-  return <>처리중입니다.</>;
+  return null;
 }

src/store/user/index.ts

@@ -1,3 +1,4 @@
 import { atomWithStorage } from "jotai/utils";
 
-export const loginState = atomWithStorage("isLogin", false);
+export const loginState = atomWithStorage("isLogin", false);
+export const tokenState = atomWithStorage("accessToken", "");