登录、退出登录

src/views/main-header.vue

@@ -26,13 +26,13 @@
 			>
 				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
 			</div>
-			<div class="login" @click="onLogin">Login</div>
 			<el-popover
 				ref="profilePopover"
 				placement="bottom-end"
 				trigger="click"
 				:show-arrow="false"
 				popper-style="width: 24rem; padding: 0; border-radius: 0; right: 2rem; top: 10rem;"
+				v-if="userInfo.userId"
 			>
 				<template #reference><div class="profile"></div></template>
 				<template #default>
@@ -41,7 +41,7 @@
 							<img src="@/assets/images/profile-content-bg.jpg" alt="" />
 							<div class="content">
 								<div class="profile"></div>
-								<div class="name">Hi, Alexandra_chen</div>
+								<div class="name">Hi, {{ userInfo.username }}</div>
 							</div>
 						</div>
 						<div class="nav-item" @click="onMyWardrobe">
@@ -64,6 +64,7 @@
 					</div>
 				</template>
 			</el-popover>
+			<div class="login" @click="onLogin" v-else>Login</div>
 			<div class="language" @click="onLanguageClick">
 				<span :class="{ active: locale === 'CHINESE_SIMPLIFIED' }">中</span> /
 				<span :class="{ active: locale === 'ENGLISH' }">ENG</span>
@@ -73,13 +74,17 @@
 </template>
 
 <script setup lang="ts">
+	import { ElMessageBox } from 'element-plus'
 	import { computed, ref } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import myEvent from '@/utils/myEvent'
 	import { useI18n } from 'vue-i18n'
+	import { useUserInfoStore } from '@/stores/userInfo'
 	const { t, locale } = useI18n()
+	const userInfoStore = useUserInfoStore()
 	const router = useRouter()
 	const route = useRoute()
+	const userInfo = computed(() => userInfoStore.state.userInfo)
 	const activePath = computed(() => route.path)
 	const navList1 = ref([
 		{
@@ -137,7 +142,12 @@
 	}
 	const onLogout = () => {
 		hideProfilePopover()
-		console.log('logout')
+		ElMessageBox.confirm('Are you sure to log off?')
+			.then(() => {
+				userInfoStore.logout()
+				router.go(0)
+			})
+			.catch(() => {})
 	}
 	const onLanguageClick = () => {
 		locale.value = locale.value === 'ENGLISH' ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'