🐛 Fix infinite reconnect issue

src/scripts/request.ts

@@ -7,33 +7,37 @@ const serviceMap: { [id: string]: string } = {
   messaging: "https://im.solsynth.dev"
 }
 
+export async function refreshToken() {
+  const res = await request("identity", "/api/auth/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      refresh_token: await getRtk(),
+      grant_type: "refresh_token"
+    })
+  }, true)
+  if (res.status !== 200) {
+    const err = await res.text()
+    throw new Error(err)
+  } else {
+    const data = await res.json()
+    await Preferences.set({
+      key: "identity.access_token",
+      value: data["access_token"]
+    })
+    await Preferences.set({
+      key: "identity.refresh_token",
+      value: data["refresh_token"]
+    })
+  }
+}
+
 export async function request(service: string, input: string, init?: RequestInit, noRetry?: boolean) {
   const url = buildRequestUrl(service, input)
   const res = await fetch(url, init)
 
   if (res.status === 401 && !noRetry) {
-    const res = await request("identity", "/api/auth/token", {
+    await refreshToken()
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        refresh_token: await getRtk(),
-        grant_type: "refresh_token"
-      })
-    }, true)
-    if (res.status !== 200) {
-      const err = await res.text()
-      throw new Error(err)
-    } else {
-      const data = await res.json()
-      await Preferences.set({
-        key: "identity.access_token",
-        value: data["access_token"]
-      })
-      await Preferences.set({
-        key: "identity.refresh_token",
-        value: data["refresh_token"]
-      })
-    }
 
     console.info("[REQUEST] Auth context has been refreshed.")
     return await request(service, input, {

src/stores/channels.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia"
 import { reactive, ref, watch } from "vue"
 import { checkLoggedIn, getAtk } from "@/stores/userinfo"
-import { buildRequestUrl, request } from "@/scripts/request"
+import { buildRequestUrl, refreshToken, request } from "@/scripts/request"
 import { useRoute } from "vue-router"
 import { useUI } from "@/stores/ui"
 
@@ -73,15 +73,16 @@ export const useChannels = defineStore("channels", () => {
 
     socket.addEventListener("open", (event) => {
       console.log("[MESSAGING] The unified websocket has been established... ", event.type)
-      reconnectCount = 0
     })
     socket.addEventListener("close", (event) => {
       console.warn("[MESSAGING] The unified websocket is disconnected... ", event.reason, event.code)
       const reconnect = () => {
         reconnectCount = 0
-        connect().then(() => {
+        refreshToken().then(() => {
-          ui.reconnection.messages = false
+          connect().then(() => {
-          reconnectCount++
+            ui.reconnection.messages = false
+            reconnectCount++
+          })
         })
       }
       ui.reconnection.messages = true

src/stores/notifications.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia"
 import { ref } from "vue"
 import { checkLoggedIn, getAtk } from "@/stores/userinfo"
-import { buildRequestUrl, request } from "@/scripts/request"
+import { buildRequestUrl, refreshToken, request } from "@/scripts/request"
 import { LocalNotifications } from "@capacitor/local-notifications"
 import { Capacitor } from "@capacitor/core"
 import { useUI } from "@/stores/ui"
@@ -52,15 +52,16 @@ export const useNotifications = defineStore("notifications", () => {
 
     socket.addEventListener("open", (event) => {
       console.log("[NOTIFICATIONS] The listen websocket has been established... ", event.type)
-      reconnectCount = 0
     })
     socket.addEventListener("close", (event) => {
       console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code)
       const reconnect = () => {
         reconnectCount = 0
-        connect().then(() => {
+        refreshToken().then(() => {
-          ui.reconnection.notifications = false
+          connect().then(() => {
-          reconnectCount++
+            ui.reconnection.notifications = false
+            reconnectCount++
+          })
         })
       }
       ui.reconnection.notifications = true