fix(web,server): web socket auth (for web) (#4632)

web/src/lib/stores/websocket.ts

@@ -1,5 +1,5 @@
 import type { AssetResponseDto, ServerVersionResponseDto } from '@api';
-import { io } from 'socket.io-client';
+import { Socket, io } from 'socket.io-client';
 import { writable } from 'svelte/store';
 import { loadConfig } from './server-config.store';
 
@@ -20,9 +20,15 @@ export const websocketStore = {
   onRelease: writable<ReleaseEvent>(),
 };
 
+let websocket: Socket | null = null;
+
 export const openWebsocketConnection = () => {
   try {
-    const websocket = io('', {
+    if (websocket) {
+      return;
+    }
+
+    websocket = io('', {
       path: '/api/socket.io',
       reconnection: true,
       forceNew: true,
@@ -40,9 +46,14 @@ export const openWebsocketConnection = () => {
       .on('on_config_update', () => loadConfig())
       .on('on_new_release', (data) => websocketStore.onRelease.set(data))
       .on('error', (e) => console.log('Websocket Error', e));
-
-    return () => websocket?.close();
   } catch (e) {
     console.log('Cannot connect to websocket ', e);
   }
 };
+
+export const closeWebsocketConnection = () => {
+  if (websocket) {
+    websocket.close();
+  }
+  websocket = null;
+};

web/src/routes/+layout.svelte

@@ -18,7 +18,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { api } from '@api';
-  import { openWebsocketConnection } from '$lib/stores/websocket';
+  import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
 
   let showNavigationLoadingBar = false;
   export let data: LayoutData;
@@ -28,7 +28,18 @@
     api.setKey($page.params.key);
   }
 
-  beforeNavigate(() => {
+  beforeNavigate(({ from, to }) => {
+    const fromRoute = from?.route?.id || '';
+    const toRoute = to?.route?.id || '';
+
+    if (fromRoute.startsWith('/auth') && !toRoute.startsWith('/auth')) {
+      openWebsocketConnection();
+    }
+
+    if (!fromRoute.startsWith('/auth') && toRoute.startsWith('/auth')) {
+      closeWebsocketConnection();
+    }
+
     showNavigationLoadingBar = true;
   });
 
@@ -37,7 +48,9 @@
   });
 
   onMount(async () => {
-    openWebsocketConnection();
+    if ($page.route.id?.startsWith('/auth') === false) {
+      openWebsocketConnection();
+    }
 
     try {
       await loadConfig();