feat(owner-vue): userInfo data 상위 컴포넌트로 이동

- userInfo data 상위 컴포넌트로 이동
This commit is contained in:
hoon7566
2022-03-21 20:57:13 +09:00
parent 64ce15ba35
commit 7cacc89784
3 changed files with 23 additions and 26 deletions

View File

@@ -1,13 +1,16 @@
<template> <template>
<v-app id="inspire"> <v-app id="inspire">
<side-bar :drawer="drawer" @drawerEvent="drawer = !drawer"></side-bar> <side-bar :drawer="drawer" @drawerEvent="drawer = !drawer" :userInfo="userInfo"/>
<top-bar @drawerEvent="drawer = !drawer" <top-bar @drawerEvent="drawer = !drawer"
:notificationCounts="notificationCounts"/> :notificationCounts="notificationCounts"
:userInfo="userInfo"
/>
<v-main style="background: #f5f5f540"> <v-main style="background: #f5f5f540">
<v-container class="py-8, px-6" fluid> <v-container class="py-8, px-6" fluid>
<router-view <router-view
v-on:plusCount="notificationCounts++" v-on:plusCount="notificationCounts++"
v-on:minusCount="notificationCounts--" v-on:minusCount="notificationCounts--"
:userInfo="userInfo"
></router-view> ></router-view>
</v-container> </v-container>
</v-main> </v-main>
@@ -18,6 +21,7 @@
import Sidebar from './Sidebar.vue' import Sidebar from './Sidebar.vue'
import Topbar from "./Topbar.vue"; import Topbar from "./Topbar.vue";
import notificationApi from "@/api/notification"; import notificationApi from "@/api/notification";
import userApi from "@/api/user";
export default { export default {
name: "DashboardLayout", name: "DashboardLayout",
@@ -25,20 +29,27 @@ export default {
'side-bar': Sidebar, 'side-bar': Sidebar,
'top-bar': Topbar 'top-bar': Topbar
}, },
mounted() { async mounted() {
this.searchNotificationCounts(); await this.searchNotificationCounts();
// 사용자 정보 가져오기
this.userInfo = await this.getUserInfo();
}, },
data: function() { data: function() {
return { return {
drawer: true, drawer: true,
notificationCounts: 0 notificationCounts: 0,
userInfo: {},
} }
}, },
methods: { methods: {
searchNotificationCounts: async function() { searchNotificationCounts: async function() {
const response = await notificationApi.countsNotification(); const response = await notificationApi.countsNotification();
this.notificationCounts = response.data.data; this.notificationCounts = response.data.data;
} },
getUserInfo: async function() {
const response = await userApi.requestUserInfo();
return response.data.data;
},
} }
} }
</script> </script>

View File

@@ -33,7 +33,7 @@
<v-icon>mdi-account-circle</v-icon> <v-icon>mdi-account-circle</v-icon>
</v-avatar> </v-avatar>
</v-badge> </v-badge>
<span class="ml-3">{{ userName }}</span> <span class="ml-3">{{ userInfo.name }}</span>
</v-chip> </v-chip>
</span> </span>
</template> </template>
@@ -44,7 +44,7 @@
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ userName }}</v-list-item-title> <v-list-item-title>{{ userInfo.name }}</v-list-item-title>
<v-list-item-subtitle>Logged In</v-list-item-subtitle> <v-list-item-subtitle>Logged In</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
@@ -63,27 +63,13 @@
</template> </template>
<script> <script>
import userApi from "../../api/user";
import authApi from "../../api/auth"; import authApi from "../../api/auth";
export default { export default {
name: "Topbar", name: "Topbar",
props: ["notificationCounts"], props: ["notificationCounts","userInfo"],
data() {
return {
userName: '',
};
},
async mounted() {
// 사용자 정보 가져오기
const data = await this.getUserInfo();
this.userName = data.name;
},
methods: { methods: {
getUserInfo: async function() {
const response = await userApi.requestUserInfo();
return response.data.data;
},
logout: async function() { logout: async function() {
await authApi.logout(); await authApi.logout();
}, },

View File

@@ -44,7 +44,7 @@ export default {
name: "LoginUser", name: "LoginUser",
mounted() { mounted() {
if (false == jwt.isExpired()) { if (false == jwt.isExpired()) {
this.$router.push('/order'); this.$router.push('/');
} }
}, },
data: function() { data: function() {
@@ -62,7 +62,7 @@ export default {
const flag = await userApi.requestLoginUser(this.email, this.password); const flag = await userApi.requestLoginUser(this.email, this.password);
if (flag) await this.$router.push('/order'); if (flag) await this.$router.push('/');
} }
} }
} }