feat(owner-vue): userInfo data 상위 컴포넌트로 이동
- userInfo data 상위 컴포넌트로 이동
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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();
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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('/');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user