🐛 Fix infinite reconnect issue

src/scripts/request.ts

@@ -7,11 +7,7 @@ const serviceMap: { [id: string]: string } = {
   messaging: "https://im.solsynth.dev"
 }
 
-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) {
+export async function refreshToken() {
   const res = await request("identity", "/api/auth/token", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -34,6 +30,14 @@ export async function request(service: string, input: string, init?: RequestInit
       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) {
+    await refreshToken()
 
     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,16 +73,17 @@ 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
+        refreshToken().then(() => {
           connect().then(() => {
             ui.reconnection.messages = false
             reconnectCount++
           })
+        })
       }
       ui.reconnection.messages = true
       if (reconnectCount <= 3) {

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,16 +52,17 @@ 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
+        refreshToken().then(() => {
           connect().then(() => {
             ui.reconnection.notifications = false
             reconnectCount++
           })
+        })
       }
       ui.reconnection.notifications = true
       if (reconnectCount <= 3) {