feat(owner-vue): 로그아웃 기능 구현

- 로그아웃 성공 시 로컬 스토리지 초기화

owner-vue/src/api/auth.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import jwt from "@/common/jwt";
+import router from "@/router";
 
 export default {
   async requestReissue() {
@@ -22,5 +23,23 @@ export default {
     axios.defaults.headers.common['Authorization'] =  "Bearer " + jwt.getToken();
 
     return axios.get( process.env.VUE_APP_USER_AUTH_URL +"/check/access-token");
+  },
+  async logout() {
+    const config = {
+      headers: {
+        "X-AUTH-TOKEN": jwt.getToken()
+      }
+    }
+    try {
+      const response = await axios.post(process.env.VUE_APP_USER_AUTH_URL + "/logout", null, config);
+      if (response.data.code == 'SUCCESS') {
+        jwt.destroyAll();
+        await router.push("/login");
+      }  else {
+        alert("로그아웃 실패");
+      }
+    } catch (error) {
+      console.log("[logout]", error);
+    }
   }
 }

owner-vue/src/api/user.js

@@ -26,6 +26,9 @@ export default {
       return false;
     }
 
+  },
+  requestUserInfo() {
+    return axios.get(process.env.VUE_APP_OWNER_SERVICE_BASEURL + '/user-service/store-owner');
   }
 }
 

owner-vue/src/router/index.js

@@ -27,9 +27,7 @@ const routes = [
     path: '/dashboard',
     redirect: 'dashboard',
     component: DashboardLayout,
-    beforeEnter: authCheck,
     children: [
-
       {
         path: '/category',
         name: 'category',

owner-vue/src/views/Layout/Topbar.vue

@@ -2,19 +2,6 @@
   <v-app-bar app elevate-on-scroll elevation="3" color="white">
     <v-app-bar-nav-icon @click="$emit('drawerEvent')"></v-app-bar-nav-icon>
     <v-spacer />
-    <v-col lg="6" cols="12">
-      <v-form>
-        <v-text-field
-          class="p-0 m-0 mt-6"
-          full-width
-          dense
-          append-icon="mdi-magnify"
-          outlined
-          rounded
-          placeholder="Search"
-        />
-      </v-form>
-    </v-col>
     <v-spacer />
     <v-menu offset-y>
       <template v-slot:activator="{ attrs, on }">
@@ -64,31 +51,31 @@
           <v-chip link>
             <v-badge dot bottom color="green" offset-y="10" offset-x="10">
               <v-avatar size="40">
-                <v-img src="https://randomuser.me/api/portraits/women/81.jpg" />
+                <v-icon>mdi-account-circle</v-icon>
               </v-avatar>
             </v-badge>
-            <span class="ml-3">Jane Smith</span>
+            <span class="ml-3">{{ userName }}</span>
           </v-chip>
         </span>
       </template>
       <v-list width="250" class="py-0">
         <v-list-item two-line>
           <v-list-item-avatar>
-            <img src="https://randomuser.me/api/portraits/women/81.jpg" />
+            <v-icon>mdi-account-circle</v-icon>
           </v-list-item-avatar>
 
           <v-list-item-content>
-            <v-list-item-title>Jane Smith</v-list-item-title>
+            <v-list-item-title>{{ userName }}</v-list-item-title>
             <v-list-item-subtitle>Logged In</v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
         <v-divider />
-        <v-list-item link v-for="(menu, i) in menus" :key="i">
+        <v-list-item link @click="logout">
           <v-list-item-icon>
-            <v-icon>{{ menu.icon }}</v-icon>
+            <v-icon>mdi-logout</v-icon>
           </v-list-item-icon>
           <v-list-item-title>
-            {{ menu.title }}
+            Logout
           </v-list-item-title>
         </v-list-item>
       </v-list>
@@ -97,15 +84,16 @@
 </template>
 
 <script>
+import userApi from "../../api/user";
+import authApi from "../../api/auth";
+
 export default {
   name: "Topbar",
   data() {
     return {
+      userName: '',
       menus: [
-        { title: "Profile", icon: "mdi-account" },
+        { title: "Logout", icon: "mdi-logout", methods: "logout" },
-        { title: "Change Password", icon: "mdi-key" },
-        { title: "Setting", icon: "mdi-cog" },
-        { title: "Logout", icon: "mdi-logout" },
       ],
       items: [
         {
@@ -143,6 +131,20 @@ export default {
       ],
     };
   },
+  async mounted() {
+    // 사용자 정보 가져오기
+    const data = await this.getUserInfo();
+    this.userName = data.name;
+  },
+  methods: {
+    getUserInfo: async function() {
+      const response = await userApi.requestUserInfo();
+      return response.data.data;
+    },
+    logout: async function () {
+      await authApi.logout();
+    },
+  }
 };
 </script>