login pinia

composables/useApi.ts

@@ -1,4 +1,4 @@
-import { useFetch, useRuntimeConfig, useCookie } from '#imports'
+import { useFetch, useRuntimeConfig } from '#imports';
 
 export const useApi = <T>(
   path: string,
@@ -10,18 +10,23 @@ export const useApi = <T>(
     server?: boolean // ← 이 줄 추가!
   } = {}
 ) => {
-  const config = useRuntimeConfig()
+  const userStore = useUserStore();
-  const token = useCookie('token')
+
+  const config = useRuntimeConfig();
 
   const method = options.method ? options.method.toUpperCase() : 'GET'
-
+  
   return useFetch<T>(() => `${config.public.apiBase}${config.public.contextPath}${path}`, {
     method: method as any, // 타입 강제 우회
     body: options.body,
     query: options.query,
     headers: {
-      Authorization: token.value ? `Bearer ${token.value}` : '',
+      Authorization: 'Bearer ' + userStore.getToken,
-      ...options.headers
+      ...options.headers,
+    },
+    onResponse({response}){    
+      const accessToken = response.headers.get("Authorization") || "";
+      userStore.setToken(accessToken.replace("Bearer ", ""));
     },
     server: options.server // ← 이 줄 추가!
   })

pages/[tabId]/index.vue

@@ -27,6 +27,9 @@
             {{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
             로그인되었습니다.
           </p>
+          <p class="text-sm text-gray-600">
+            <button @click="useApi<ApiResponse<{}>>('/files/download/1756167537354001',{method: 'get'});" > Test</button>
+          </p>
         </div>
         <div
           v-else

stores/user.ts

@@ -29,7 +29,7 @@ export const useUserStore = defineStore("user", () => {
         method: 'post',
         body: { userId, password }
       })     
-     
+
       let mockUser;
 
       if(data && data.value && data.value.success){
@@ -39,13 +39,9 @@ export const useUserStore = defineStore("user", () => {
       }
 
       user.value = mockUser;
-      token.value = "mock-token-" + Date.now();
+      // token.value = "mock-token-" + Date.now();
       isLoggedIn.value = true;
 
-      // 로컬 스토리지에 저장
-      localStorage.setItem("user", JSON.stringify(mockUser));
-      localStorage.setItem("token", token.value);
-
       return { success: true, user: mockUser };
     } catch (error) {
       console.error("로그인 실패:", error);
@@ -79,6 +75,14 @@ export const useUserStore = defineStore("user", () => {
     }
   };
 
+  const setToken = (accessToken : string) => {
+    token.value = accessToken;
+  }
+
+  const getToken = () => {
+    return token;
+  }
+
   // 초기 인증 상태 확인
   if (import.meta.client) {
     checkAuth();
@@ -98,5 +102,7 @@ export const useUserStore = defineStore("user", () => {
     login,
     logout,
     checkAuth,
+    setToken,
+    getToken
   };
 });