Fix: api, auth store, coverletterview 수정

doh3e · doh3e · commit b30a7c830000 · 2025-01-09T14:13:27.000+09:00
api에서 백엔드를 호출하도록 명확히 지정
지정하지 않아 일부 페이지(자소서)에서 프론트 주소를 호출
auth store에서 주기적으로 토큰 만료여부 확인
토큰 만료 시 로그아웃 처리
coverletterview에서 api 호출부 오류 일부 수정
diff --git a/front/src/api/index.js b/front/src/api/index.js
@@ -4,7 +4,7 @@ import axios from "axios";
 // axios 인스턴스 생성
 // 1. Auth 인증/인가
 const apiAuth = axios.create({
-  baseURL: "/api/v1",
+  baseURL: "http://localhost:8080/api/v1",
   timeout: 5000, // 제한시간
 })
 
diff --git a/front/src/stores/auth.js b/front/src/stores/auth.js
@@ -3,73 +3,101 @@ import { apiAuth, api } from '@/api'
 import { ref } from 'vue'
 
 export const useAuthStore = defineStore('auth', () => {
-  const user = ref(null)
+  const loginUser = ref(null)
   const isLoggedIn = ref(false)
+  let tokenCheckInterval = null
 
-  if(localStorage.getItem('token')) {
+  if (localStorage.getItem('token')) {
     isLoggedIn.value = true
   }
-  
 
   async function login(email, password) {
-      try {
-        console.log(email, password)
-        const response = await api.post("/user/login", {
-          email, password,
-        })
-        
-        const token = response.data["refresh-token"]
-        user.value = { email }; // 사용자 정보 저장
-        localStorage.setItem("users", JSON.stringify(user.value)); // 사용자 정보 저장
-        localStorage.setItem("token", token) // 토큰저장
-        isLoggedIn.value = true;
-        return { success: true, message: "로그인이 완료되었습니다." };
-      } catch (err) {
-          if (err.response && err.response.status === 401) {
-            return { success: false, message: "이메일 또는 비밀번호가 잘못되었습니다." };
-          } else {
-            console.error("로그인 오류", err);
-            return { success: false, message: "로그인 중 문제가 발생했습니다. 다시 시도해주세요." };
-          }
+    try {
+      const response = await api.post("/user/login", { email, password })
+      const token = response.data["refresh-token"]
+      loginUser.value = { email }
+      localStorage.setItem("loginUser", JSON.stringify(loginUser.value))
+      localStorage.setItem("token", token)
+      isLoggedIn.value = true
+      return { success: true, message: "로그인이 완료되었습니다." }
+    } catch (err) {
+      if (err.response && err.response.status === 401) {
+        return { success: false, message: "이메일 또는 비밀번호가 잘못되었습니다." }
+      } else {
+        console.error("로그인 오류", err)
+        return { success: false, message: "로그인 중 문제가 발생했습니다. 다시 시도해주세요." }
       }
+    }
   }
 
   async function logout() {
     try {
+      const token = localStorage.getItem("token")
+      if (!token || isTokenExpired(token)) {
+        handleClientLogout()
+        return { success: true, message: "로그아웃이 완료되었습니다." }
+      }
       await apiAuth.post("/user/logout")
-      localStorage.removeItem("token")
-      localStorage.removeItem("email")
-      user.value = null;
-      isLoggedIn.value = false;
-      return { success: true, message: "로그아웃이 완료되었습니다." };
+      handleClientLogout()
+      return { success: true, message: "로그아웃이 완료되었습니다." }
     } catch (err) {
-      console.error("로그아웃 오류", err);
-      return { success: false, message: "로그아웃 중 문제가 발생했습니다. 다시 시도해주세요." };
+      console.error("로그아웃 오류", err)
+      handleClientLogout()
+      return { success: false, message: "로그아웃 중 문제가 발생했습니다. 다시 시도해주세요." }
     }
   }
 
-  // function checkAuth() {
-  //     // const storedUser = localStorage.getItem('user')
-  //     // if (isLoggedIn) {
-  //     //   user.value = JSON.parse(storedUser)
-  //     //   isLoggedIn = true
-  //     // }
-  // }
+  function handleClientLogout() {
+    clearInterval(tokenCheckInterval) // 토큰 확인 중지
+    localStorage.removeItem("token")
+    localStorage.removeItem("loginUser")
+    loginUser.value = null
+    isLoggedIn.value = false
+  }
+
   function checkAuth() {
-    const storedUser = localStorage.getItem('user');
-    if (storedUser) {
-      user.value = JSON.parse(storedUser);
-      isLoggedIn.value = true;
+    const token = localStorage.getItem('token')
+    const storedUser = localStorage.getItem('loginUser')
+
+    if (token && storedUser && !isTokenExpired(token)) {
+      loginUser.value = JSON.parse(storedUser)
+      isLoggedIn.value = true
+    } else {
+      logout()
     }
   }
-  
+
+  function isTokenExpired(token) {
+    try {
+      const payload = JSON.parse(atob(token.split('.')[1])) // JWT 디코딩
+      const currentTime = Math.floor(Date.now() / 1000) // 현재 시간 (초 단위)
+      return payload.exp < currentTime // 만료 여부 확인
+    } catch (err) {
+      console.error("토큰 디코딩 오류", err)
+      return true // 디코딩 실패 시 만료된 것으로 처리
+    }
+  }
+
+  function startTokenCheck() {
+    if (tokenCheckInterval) return // 중복 실행 방지
+    tokenCheckInterval = setInterval(() => {
+      const token = localStorage.getItem("token")
+      if (token && isTokenExpired(token)) {
+        logout()
+        alert("세션이 만료되었습니다. 다시 로그인해주세요.")
+      }
+    }, 300000) // 5분마다 확인
+  }
+
+  checkAuth()
+  startTokenCheck()
 
   return {
-    user,
+    loginUser,
     isLoggedIn,
     login,
     logout,
-    checkAuth
+    checkAuth,
+    startTokenCheck,
   }
 })
-
diff --git a/front/src/utils/axios.js b/front/src/utils/axios.js
diff --git a/front/src/views/CoverLetterView.vue b/front/src/views/CoverLetterView.vue
@@ -8,8 +8,8 @@
       </h1>
       <div class="flex space-x-8">
         <!-- Resume Tab View -->
-        <div class="w-1/3">
-          <div v-if="resumeData.length > 0">
+        <div class="w-1/2">
+          <div v-if="isResumeExist">
             <ResumeTabView />
           </div>
           <div v-else class="bg-white p-6 rounded-lg shadow-md text-center">
@@ -26,7 +26,7 @@
         </div>
 
         <!-- Cover Letter Tabs -->
-        <div class="w-2/3">
+        <div class="w-1/2">
           <div class="bg-white p-6 rounded-lg shadow-md">
             <input
               v-model="coverLetterTitle"
@@ -81,11 +81,14 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import { apiAuth } from "@/api/index.js";
+import { useAuthStore } from "@/stores/auth";
 import ResumeTabView from "@/components/CoverLetter/ResumeTabView.vue";
 import CoverLetterSection from "@/components/CoverLetter/CoverLetterSection.vue";
 
 const router = useRouter();
-const resumeData = ref([]);
+const resumeData = ref({});
+const isResumeExist = ref(false);
 const coverLetterData = ref({});
 const currentSection = ref("motivation");
 const coverLetterTitle = ref("");
@@ -101,49 +104,35 @@ const coverLetterSections = [
 ];
 
 onMounted(async () => {
-  const isLoggedIn = checkUserAuthentication();
-  if (!isLoggedIn) {
-    router.push("/auth");
-    return;
-  }
-
-  await fetchResumeData();
-  await fetchCoverLetterData();
+  fetchResumeData();
+  fetchCoverLetterData();
 });
 
-const checkUserAuthentication = () => {
-  const token = localStorage.getItem("authToken");
-  return !!token;
-};
-
 const fetchResumeData = async () => {
   try {
-    const response = await fetch("/api/resume");
-    if (!response.ok) throw new Error("Failed to fetch resume data");
-    const data = await response.json();
-    resumeData.value = [
-      {
-        id: 1,
-        title: data.personalInfo.name + "의 이력서",
-        data: data,
-      },
-    ];
+    const response = await apiAuth.get('/resume');
+    console.log("Resume API 응답:", response.data);
+    const data = response.data.resume;
+    if (data) {
+      resumeData.value = data;
+      isResumeExist.value = true;
+    }
   } catch (error) {
-    console.error("Failed to fetch resume data:", error);
-    resumeData.value = [];
+    console.error('이력서 생성 중 에러:', error);
   }
 };
 
 const fetchCoverLetterData = async () => {
   try {
-    const response = await fetch("/api/coverletter");
-    const data = await response.json();
+    const response = await apiAuth.get("/coverletters");
+    const data = response.data.coverletter;
     coverLetterData.value = data.sections;
     coverLetterTitle.value = data.title || "";
+
   } catch (error) {
-    console.error("Failed to fetch cover letter data:", error);
+    console.error('기존 자소서 생성 중 에러:', error);
     coverLetterData.value = {};
-    coverLetterTitle.value = "";
+    coverLetterTitle.value = ""
   }
 };
 
@@ -153,11 +142,7 @@ const updateSection = (sectionId, content) => {
 
 const saveSection = async (sectionId) => {
   try {
-    const response = await fetch(`/api/v1/coverletter/${sectionId}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
+    const response = await apiAuth.post(`coverletters/${sectionId}`, {
       body: JSON.stringify({ content: coverLetterData.value[sectionId] }),
     });
     if (!response.ok) throw new Error("Failed to save section");
@@ -170,8 +155,7 @@ const saveSection = async (sectionId) => {
 
 const saveCoverLetter = async () => {
   try {
-    const response = await fetch("/api/coverletter", {
-      method: "POST",
+    const response = await apiAuth.post("/coverletters", {
       headers: {
         "Content-Type": "application/json",
       },
@@ -190,7 +174,6 @@ const saveCoverLetter = async () => {
 </script>
 
 <style scoped>
-/* 필요한 경우 추가 스타일 */
 .overflow-x-auto {
   scrollbar-width: thin;
   scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
