SvelteKit实现断网提示界面及登录状态持续检测方案咨询

可以通过浏览器原生API结合SvelteKit的全局组件实现，同时可额外增加服务器连接检测提升准确性：

• 基础离线状态监听
  创建全局组件OfflineNotice.svelte，监听浏览器online/offline事件切换提示显示：

  <script>
    import { onMount } from 'svelte';
    let isOffline = !navigator.onLine;
  
    const handleStatusChange = () => {
      isOffline = !navigator.onLine;
    };
  
    onMount(() => {
      window.addEventListener('online', handleStatusChange);
      window.addEventListener('offline', handleStatusChange);
      return () => {
        window.removeEventListener('online', handleStatusChange);
        window.removeEventListener('offline', handleStatusChange);
      };
    });
  </script>
  
  {#if isOffline}
    <div class="offline-banner">
      当前无网络连接，请检查网络设置
    </div>
  {/if}
  
  <style>
    .offline-banner {
      position: fixed;
      top: 0;
      width: 100%;
      background: #ff4444;
      color: #fff;
      padding: 1rem;
      text-align: center;
      z-index: 9999;
    }
  </style>
  

  在根布局+layout.svelte中引入该组件，确保全局生效：

  <script>
    import OfflineNotice from '$lib/components/OfflineNotice.svelte';
  </script>
  
  <OfflineNotice />
  <slot />
  

• 补充服务器连接检测
  浏览器navigator.onLine可能存在误判，可新增轮询服务器接口的逻辑：
  在OfflineNotice.svelte中添加：

  let serverReachable = true;
  
  const checkServerConnection = async () => {
    try {
      const res = await fetch('/api/ping', { method: 'HEAD' });
      serverReachable = res.ok;
    } catch {
      serverReachable = false;
    }
    isOffline = !navigator.onLine || !serverReachable;
  };
  
  onMount(() => {
    checkServerConnection();
    const interval = setInterval(checkServerConnection, 5000);
    return () => clearInterval(interval);
  });
  

  对应创建/api/ping/+server.js接口：

  export function HEAD() {
    return new Response(null, { status: 200 });
  }
  

方案一：定时API轮询 #

在根布局或全局组件中定时调用登录状态验证接口，未登录时自动跳转：

<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { page } from '$app/stores';

  const checkAuthStatus = async () => {
    try {
      const res = await fetch('/api/auth/check');
      if (!res.ok && $page.url.pathname !== '/login') {
        await goto('/login');
      }
    } catch {
      // 网络异常时可暂不处理，或根据需求调整
    }
  };

  onMount(() => {
    checkAuthStatus();
    const interval = setInterval(checkAuthStatus, 30000); // 每30秒检查一次
    return () => clearInterval(interval);
  });
</script>

方案二：WebSocket实时推送 #

通过WebSocket让服务器主动通知前端会话过期，比轮询更高效：
在根布局中添加WebSocket逻辑：

<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { page } from '$app/stores';

  let socket;

  const initWebSocket = () => {
    socket = new WebSocket(`ws://${window.location.host}/ws/auth`);
    
    socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'SESSION_EXPIRED' && $page.url.pathname !== '/login') {
        goto('/login');
        socket.close();
      }
    };

    socket.onclose = () => setTimeout(initWebSocket, 5000); // 断开后自动重连
  };

  onMount(() => {
    initWebSocket();
    return () => socket?.close();
  });
</script>

服务器端需实现WebSocket服务，在用户会话过期时向前端发送SESSION_EXPIRED类型消息，同时在用户主动退出时关闭连接。

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