hookehuyr

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

在设置页面添加退出登录按钮及处理逻辑,包括确认弹窗和清除会话
1 <!-- 1 <!--
2 * @Date: 2025-03-24 13:04:21 2 * @Date: 2025-03-24 13:04:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-13 11:41:59 4 + * @LastEditTime: 2025-12-03 11:50:30
5 * @FilePath: /mlaj/src/views/profile/SettingsPage.vue 5 * @FilePath: /mlaj/src/views/profile/SettingsPage.vue
6 * @Description: 用户设置页面 6 * @Description: 用户设置页面
7 --> 7 -->
...@@ -97,6 +97,17 @@ ...@@ -97,6 +97,17 @@
97 <ChevronRightIcon class="w-5 h-5 text-gray-400" /> 97 <ChevronRightIcon class="w-5 h-5 text-gray-400" />
98 </div> 98 </div>
99 </div> 99 </div>
100 +
101 + <!-- 退出登录 -->
102 + <div class="p-4" @click="handleLogout">
103 + <div class="flex items-center justify-between">
104 + <div>
105 + <h3 class="text-base font-medium text-red-500">退出登录</h3>
106 + <p class="text-sm text-gray-500">退出当前账号</p>
107 + </div>
108 + <ChevronRightIcon class="w-5 h-5 text-gray-400" />
109 + </div>
110 + </div>
100 </div> 111 </div>
101 </FrostedGlass> 112 </FrostedGlass>
102 </div> 113 </div>
...@@ -112,9 +123,12 @@ import FrostedGlass from '@/components/ui/FrostedGlass.vue'; ...@@ -112,9 +123,12 @@ import FrostedGlass from '@/components/ui/FrostedGlass.vue';
112 import { ChevronRightIcon } from '@heroicons/vue/24/outline'; 123 import { ChevronRightIcon } from '@heroicons/vue/24/outline';
113 import { useTitle } from '@vueuse/core'; 124 import { useTitle } from '@vueuse/core';
114 import { getUserInfoAPI } from '@/api/users'; 125 import { getUserInfoAPI } from '@/api/users';
126 +import { showConfirmDialog, showToast } from 'vant';
127 +import { useAuth } from '@/contexts/auth';
115 128
116 const $route = useRoute(); 129 const $route = useRoute();
117 const router = useRouter(); 130 const router = useRouter();
131 +const { logout } = useAuth();
118 useTitle($route.meta.title); 132 useTitle($route.meta.title);
119 133
120 // 用户头像 134 // 用户头像
...@@ -126,6 +140,24 @@ const username = ref(''); ...@@ -126,6 +140,24 @@ const username = ref('');
126 // 手机号 140 // 手机号
127 const phone = ref(''); 141 const phone = ref('');
128 142
143 +// 退出登录
144 +const handleLogout = () => {
145 + showConfirmDialog({
146 + title: '提示',
147 + message: '确定要退出登录吗?',
148 + })
149 + .then(() => {
150 + // 确认退出
151 + document.cookie = 'PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
152 + logout(); // Clear any other auth state if present
153 + showToast('已退出登录');
154 + router.replace('/');
155 + })
156 + .catch(() => {
157 + // 取消退出
158 + });
159 +};
160 +
129 // 获取用户信息 161 // 获取用户信息
130 onMounted(async () => { 162 onMounted(async () => {
131 try { 163 try {
......