hookehuyr

feat(设置页): 添加退出登录功能

在设置页面添加退出登录按钮及处理逻辑,包括确认弹窗和清除会话
<!--
* @Date: 2025-03-24 13:04:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-13 11:41:59
* @LastEditTime: 2025-12-03 11:50:30
* @FilePath: /mlaj/src/views/profile/SettingsPage.vue
* @Description: 用户设置页面
-->
......@@ -97,6 +97,17 @@
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
<!-- 退出登录 -->
<div class="p-4" @click="handleLogout">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-red-500">退出登录</h3>
<p class="text-sm text-gray-500">退出当前账号</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
</div>
</FrostedGlass>
</div>
......@@ -112,9 +123,12 @@ import FrostedGlass from '@/components/ui/FrostedGlass.vue';
import { ChevronRightIcon } from '@heroicons/vue/24/outline';
import { useTitle } from '@vueuse/core';
import { getUserInfoAPI } from '@/api/users';
import { showConfirmDialog, showToast } from 'vant';
import { useAuth } from '@/contexts/auth';
const $route = useRoute();
const router = useRouter();
const { logout } = useAuth();
useTitle($route.meta.title);
// 用户头像
......@@ -126,6 +140,24 @@ const username = ref('');
// 手机号
const phone = ref('');
// 退出登录
const handleLogout = () => {
showConfirmDialog({
title: '提示',
message: '确定要退出登录吗?',
})
.then(() => {
// 确认退出
document.cookie = 'PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
logout(); // Clear any other auth state if present
showToast('已退出登录');
router.replace('/');
})
.catch(() => {
// 取消退出
});
};
// 获取用户信息
onMounted(async () => {
try {
......