处理超时以进行正确的重定向。同时重定向和重新加载问题

Question

我实现了超时来显示模式，然后在延迟后重定向用户。具体来说，我在页面重新加载和重定向行为方面遇到了问题。在延迟期间，如果用户意外单击不同的链接，则应取消重定向并正确处理新的导航。

let timeoutId = null;
const isRedirecting = ref(false);

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

    await signOut();
    if (successMessage.value && !isOpen.value) {
        isOpen.value = true;
        isRedirecting.value = true;
        timeoutId = setTimeout(() => {
            isOpen.value = false;
            navigateTo('/'); // Redirect after 3 seconds
            isRedirecting.value = false;
        }, 3000);
    }
};

watch(route, () => {
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
});

另一个问题是，当用户单击“退出”按钮时，按钮状态会立即更改，而无需重新加载整个页面。这种行为看起来不自然，因为大多数网站通常会在注销时重新加载页面，以便正确更新 UI 元素。此外，在某些网站上，用户退出后，通常会被重定向到“正在退出...”之类的中间页面，然后再被重定向到主页。

复制：https://stackblitz.com/edit/nuxt-starter-rpcn41?file=app%2Fpages%2Fsign-in.vue

寻找可能的解决方案。

Answer 1

您可以使用 Nuxt 的“onBeforeRouteLeave”来处理当前选项卡内的重定向

onBeforeRouteLeave(() => {
if (-your not redirect conditions-) {
  return false
}})

另一方面，您可以在 singOUT 函数上放置一个 location.reload() 来在页面中重新加载