[Feat] 로그아웃 기능 개발

xeunnie · Aug 11, 2024 · a473d8a · a473d8a
1 parent 663114c
commit a473d8a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/components/layout/MainHeader.vue b/src/components/layout/MainHeader.vue
@@ -2,10 +2,12 @@
 import { ref, onMounted, watch, defineEmits } from 'vue';
 import { useRouter } from 'vue-router';
 import Cookies from 'js-cookie';
+import {useUserStore} from "@/pages/User/stores/useUserStore";
 
 const searchInput = ref('');
 const router = useRouter();
 const isLoggedIn = ref(false);
+const userStore = useUserStore();
 
 const checkLoginStatus = () => {
   const token = Cookies.get('token');
@@ -31,7 +33,7 @@ const handleSearch = () => {
 
 const toggleLogin = () => {
   if (isLoggedIn.value) {
-    Cookies.remove('token');
+    userStore.logout();
   } else {
     Cookies.set('token', 'your-token-value');
   }

diff --git a/src/pages/Project/ProjectListPage.vue b/src/pages/Project/ProjectListPage.vue
@@ -23,7 +23,7 @@
                 class="click"
             ></ProjectCardItem>
           </ul>
-          <div class="post-write" v-if="auth && auth.value === 'ROLE_ADMIN'">
+          <div class="post-write" v-if="auth != null && auth.value === 'ROLE_ADMIN'">
             <router-link :to="routes[0].path">글 작성</router-link>
           </div>
         </div>

diff --git a/src/pages/User/stores/useUserStore.js b/src/pages/User/stores/useUserStore.js
@@ -1,6 +1,7 @@
 import { defineStore } from "pinia"
 import axios from "axios";
 import Cookies from 'js-cookie';
+import router from "@/router";
 
 export const useUserStore = defineStore("user", {
     state: () => ({
@@ -110,6 +111,23 @@ export const useUserStore = defineStore("user", {
             }
         },
 
+        async logout() {
+            try {
+                let response = await axios.post("/api/logout");
+                if (response.status === 200) {
+                    this.isLoggedIn = false;
+                    localStorage.removeItem("user");
+
+                    await router.push('/');
+                    router.go(0);
+                } else{
+                    return false;
+                }
+            } catch(error){
+                console.log(" error ", error);
+            }
+        },
+
         async getAuth() {
           try{
               const response = await axios.get("/api/user/auth", {