处理超时重定向问题：解决重定向与刷新冲突及退出登录UI异常

问题1：延迟期间用户导航无法取消原定重定向 #

优化路由监听逻辑，确保任何路由变更都立即终止原定重定向流程，避免干扰用户的主动导航：

• 清除定时器后重置相关状态变量，防止残留状态影响后续操作
• 增强路由监听的处理逻辑，覆盖所有路由变更场景

问题2：退出登录UI反馈不自然、缺少中转状态 #

调整流程，让状态反馈更符合用户预期，同步常规网站的退出逻辑：

• 点击按钮后立即切换为“正在退出...”状态，给用户明确的操作反馈
• 登出完成后强制刷新页面，确保全局UI完全同步；或通过中转页过渡，避免UI断层
• 保留弹窗提示时，同步更新弹窗内容为中转状态，避免视觉割裂

修改后的完整代码 #

let timeoutId = null;
const isRedirecting = ref(false);
// 新增状态：控制按钮的中转提示
const isSigningOut = ref(false);

const handleSignOut = async () => {
    if (pending.value || isRedirecting.value || isSigningOut.value) return;

    // 点击后立即切换按钮状态
    isSigningOut.value = true;
    try {
        await signOut();
        if (successMessage.value) {
            isOpen.value = true;
            isRedirecting.value = true;
            timeoutId = setTimeout(() => {
                isOpen.value = false;
                // 用window.location.href强制刷新页面，确保全局UI同步
                window.location.href = '/';
                isRedirecting.value = false;
                isSigningOut.value = false;
            }, 3000);
        } else {
            // 无提示时直接刷新首页
            window.location.href = '/';
        }
    } catch (err) {
        // 登出失败时重置状态
        isSigningOut.value = false;
        console.error('登出失败:', err);
    }
};

watch(route, () => {
    if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
    }
    // 路由变更时重置所有相关状态
    isRedirecting.value = false;
    isSigningOut.value = false;
});

额外优化建议 #

1. 按钮UI绑定状态：在模板中把按钮文本与状态绑定，实现动态切换：

   <button @click="handleSignOut" :disabled="pending || isSigningOut">
       {{ isSigningOut ? '正在退出...' : '退出登录' }}
   </button>
   

2. 中转页方案：如果需要更正式的过渡体验，可创建/sign-out中转页，页面内显示“正在退出，请稍候...”，挂载后延迟跳转首页，同时在handleSignOut中直接跳转到该页面：

   // handleSignOut中替换跳转逻辑
   navigateTo('/sign-out');
   

   中转页核心逻辑示例：

   // pages/sign-out.vue
   onMounted(() => {
       setTimeout(() => {
           window.location.href = '/';
       }, 1500);
   });
   

内容的提问来源于stack exchange，提问作者Michael