[refactor]: Auth 토큰 로컬 스토리지에서 관리 및 갱신 기능 추가

Author: hpk5802

pages/api/articleApi.ts

@@ -1,6 +1,5 @@
 import { FormInputInterface } from "@/types/addBoard";
 import { ArticleInquiryInterface, PostCommentInterface } from "@/types/article";
-import { useRouter } from "next/router";
 
 const fetchArticles = async ({
   page = "1",
@@ -56,17 +55,94 @@ const fetchInquiryById = async (id: string, cursor: string | null = null) => {
   }
 };
 
+const SetTokensToLocalStorage = async () => {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/signIn`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: process.env.NEXT_PUBLIC_USER_EMAIL,
+          password: process.env.NEXT_PUBLIC_USER_PASSWORD,
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("로그인 실패: 서버에서 인증 정보를 확인하세요.");
+    }
+
+    const { accessToken, refreshToken } = await response.json();
+
+    // localStorage에 토큰 저장
+    localStorage.setItem("accessToken", accessToken);
+    localStorage.setItem("refreshToken", refreshToken);
+
+    console.log("토큰이 성공적으로 설정되었습니다.");
+  } catch (error) {
+    console.error("초기 로그인 요청 실패:", error);
+    throw error;
+  }
+};
+
+const retryFetch = async (
+  url: string,
+  options: RequestInit
+): Promise<Response> => {
+  const response = await fetch(url, options);
+
+  if (response.status === 401) {
+    // status === 401 : Unauthorized 토큰 갱신
+    const refreshResponse = await fetch(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/refresh-token`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          refreshToken: localStorage.getItem("refreshToken"),
+        }),
+      }
+    );
+
+    if (refreshResponse.ok) {
+      const { accessToken, refreshToken } = await refreshResponse.json();
+      // localStorage에 갱신된 토큰 저장
+      localStorage.setItem("accessToken", accessToken);
+      localStorage.setItem("refreshToken", refreshToken);
+
+      // requset 재요청
+      const newOptions = {
+        ...options,
+        headers: {
+          ...options.headers,
+          Authorization: `Bearer ${accessToken}`,
+        },
+      };
+      return await fetch(url, newOptions);
+    } else {
+      throw new Error("토큰 갱신 실패. 다시 로그인하세요.");
+    }
+  }
+
+  return response;
+};
+
 const uploadImage = async (file: string) => {
   const formData = new FormData();
   formData.append("image", file);
 
   try {
-    const response = await fetch(
+    const response = await retryFetch(
       `${process.env.NEXT_PUBLIC_UPLOAD_IMAGE_URL}`,
       {
         method: "POST",
         headers: {
-          Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`,
+          Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
         },
         body: formData,
       }
@@ -99,13 +175,13 @@ const postArticle = async ({ title, content, image }: FormInputInterface) => {
   };
 
   try {
-    const response = await fetch(
+    const response = await retryFetch(
       `${process.env.NEXT_PUBLIC_SERVER_URL}/articles`,
       {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`,
+          Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
         },
         body: JSON.stringify(data),
       }
@@ -128,13 +204,13 @@ const postArticleComment = async ({
   content,
 }: PostCommentInterface): Promise<ArticleInquiryInterface> => {
   try {
-    const response = await fetch(
+    const response = await retryFetch(
       `${process.env.NEXT_PUBLIC_SERVER_URL}/articles/${id}/comments`,
       {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`,
+          Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
         },
         body: JSON.stringify({ content }),
       }
@@ -157,4 +233,5 @@ export {
   fetchInquiryById,
   postArticle,
   postArticleComment,
+  SetTokensToLocalStorage,
 };

pages/index.tsx

@@ -1,10 +1,14 @@
-import Head from "next/head";
 import Header from "@/components/common/Header";
 import Link from "next/link";
 import Footer from "@/components/common/Footer";
 import Image from "next/image";
+import { useEffect } from "react";
+import { SetTokensToLocalStorage } from "./api/articleApi";
 
 export default function Home() {
+  useEffect(() => {
+    SetTokensToLocalStorage();
+  }, []);
   return (
     <>
       <Header />