로그인 했을 시 로그인,회원가입 페이지 이동X

src/router/index.js

@@ -1,9 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '@s/useAuthStore';
+
 
 // 초기 렌더링 속도를 위해 지연 로딩 사용
 const routes = [
     {
         path: '/',
+        name: "Home",
         component: () => import('@v/MainView.vue'),
         // meta: { requiresAuth: true }
     },
@@ -38,18 +41,20 @@ const routes = [
     },
     {
         path: '/login',
+        name: 'Login',
         component: () => import('@v/user/TheLogin.vue'),
-        meta: { layout: 'NoLayout' },
+        meta: { layout: 'NoLayout', requiresGuest: true },
+    },
+    {
+        path: '/register',
+        name: 'Register',
+        component: () => import('@v/user/TheRegister.vue'),
+        meta: { layout: 'NoLayout', requiresGuest: true },
     },
     {
         path: '/vacation',
         component: () => import('@v/vacation/VacationManagement.vue'),
     },
-    {
-        path: '/register',
-        component: () => import('@v/user/TheRegister.vue'),
-        meta: { layout: 'NoLayout' },
-    },
     {
         path: '/voteboard',
         component: () => import('@v/voteboard/TheVoteBoard.vue'),
@@ -80,4 +85,41 @@ const router = createRouter({
     routes: routes,
 })
 
+router.beforeEach(async (to, from, next) => {
+    const authStore = useAuthStore();
+    await authStore.checkAuthStatus(); // 로그인 상태 확인
+
+    if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+        // 로그인이 필요한 페이지인데 로그인되지 않은 경우 → 로그인 페이지로 이동
+        next({ name: 'Login' });
+    } else if (to.meta.requiresGuest && authStore.isAuthenticated) {
+        // 비로그인 사용자만 접근 가능한 페이지인데 로그인된 경우 → 홈으로 이동
+        next({ name: 'Home' });
+    } else {
+        next();
+    }
+});
+
+
+router.beforeEach(async (to, from, next) => {
+    const authStore = useAuthStore()
+
+    // 최초 앱 로드 시 인증 상태 체크
+    await authStore.checkAuthStatus()
+
+    // 현재 라우트에 인증이 필요한지 확인
+    const requiresAuth = to.meta.requiresAuth === true
+
+    if (requiresAuth && !authStore.isAuthenticated) {
+        // 인증되지 않은 사용자를 로그인 페이지로 리다이렉트
+        // 원래 가려던 페이지를 쿼리 파라미터로 전달
+        next({
+            name: 'Login',
+            query: { redirect: to.fullPath }
+        })
+    } else {
+        next()
+    }
+})
+
 export default router

src/stores/useAuthStore.js

@@ -0,0 +1,43 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+import axios from "@api";
+
+export const useAuthStore = defineStore('auth', () => {
+    const user = ref(null);
+
+    // 로그인 여부 확인
+    const isAuthenticated = computed(() => user.value !== null);
+
+    // 로그인 상태 확인
+    const checkAuthStatus = async () => {
+        const response = await axios.get('user/isLogin');
+        if (response.data.status === "OK" && response.data.data) {
+            user.value = response.data.data;
+        } else {
+            user.value = null;
+        }
+    };
+
+    // 로그아웃
+    const logout = async () => {
+
+        const response = await axios.get('user/logout');
+
+        // 로그아웃 성공 시 사용자 상태 초기화
+        if (response.data.status === "OK") {
+            user.value = null;
+            return true;
+        } else {
+            console.error("로그아웃 실패:", response.data.data);
+            return false;
+        }
+
+    };
+
+    return {
+        user,
+        isAuthenticated,
+        checkAuthStatus,
+        logout
+    };
+});