登录、退出登录

src/api/account.ts

@@ -30,7 +30,6 @@ export const AccountLogin = (data) => {
 	})
 }
 
-
 /**
  * 注册
  * @param data - 包含注册信息的参数

src/stores/userInfo.ts

@@ -5,22 +5,20 @@ import { removeLocal, setLocal } from '@/utils/local'
 import MyEvent from '@/utils/myEvent'
 export const useUserInfoStore = defineStore('userInfo', () => {
 	const state = ref({
-		userInfo: {},
-		token: '',
-		generateParams: {
-			stylist: '',
-			sex: '',
-			stylistImage: ''
-		}
+		userInfo: {
+			userId: "",
+			email: "",
+			username: "",
+			accessToken: "",
+			expiresIn: "",
+		},
+		token: ''
 	})
 
-	// getters
-	const getUserInfo = computed(() => state.value.userInfo)
-
 	// actions
 	const setUserInfo = (data: any) => {
 		state.value.userInfo = data
-		state.value.token = data.accessToken
+		setToken(data.accessToken)
 	}
 
 	const setToken = (data: string) => {
@@ -28,44 +26,26 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 		setLocal(data, 'token')
 	}
 
-	const getGenerateParams = () => {
-		return state.value.generateParams
-	}
-
-	const setGenerateParams = (data: any) => {
-		state.value.generateParams = data
-	}
-
-	const resetGenerateParams = () => {
-		state.value.generateParams = {
-			stylist: '',
-			sex: '',
-			stylistImage: ''
-		}
-	}
-
-	const logOut = () => {
+	const logout = () => {
 		// 处理退出登录的一些逻辑
 		return new Promise((resolve) => {
+			state.value.userInfo = {
+				userId: "",
+				email: "",
+				username: "",
+				accessToken: "",
+				expiresIn: "",
+			}
 			state.value.token = ''
-			state.value.userInfo = {}
 			removeLocal('token')
-			resetGenerateParams()
-			MyEvent.emit('clear-generate-state')
-			MyEvent.emit('clear-client-state')
-			MyEvent.emit('clearAllCache')
 			resolve('')
 		})
 	}
 
 	return {
 		state,
-		getUserInfo,
 		setToken,
 		setUserInfo,
-		setGenerateParams,
-		getGenerateParams,
-		resetGenerateParams,
-		logOut
+		logout
 	}
 })

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'