🐛 Fix refresh tk issue

src/components/publish/PostTools.vue

@@ -1,17 +1,23 @@
 <template>
-  <v-dialog v-model="editor.show.comment" class="max-w-[540px]" eager>
+  <v-bottom-sheet v-model="editor.show.comment" eager>
+    <div class="h-[720px]">
       <comment-editor />
-  </v-dialog>
-  <v-dialog v-model="editor.show.moment" class="max-w-[540px]" eager>
+    </div>
+  </v-bottom-sheet>
+  <v-bottom-sheet v-model="editor.show.moment" eager>
+    <div class="h-[720px]">
       <moment-editor />
-  </v-dialog>
-  <v-dialog v-model="editor.show.article" transition="dialog-bottom-transition" fullscreen eager>
+    </div>
+  </v-bottom-sheet>
+  <v-bottom-sheet v-model="editor.show.article" eager>
+    <div class="h-[720px]">
       <article-editor />
-  </v-dialog>
+    </div>
+  </v-bottom-sheet>
 
-  <v-dialog v-model="editor.show.delete" class="max-w-[540px]" eager>
+  <v-bottom-sheet v-model="editor.show.delete" eager>
     <post-deletion />
-  </v-dialog>
+  </v-bottom-sheet>
 </template>
 
 <script setup lang="ts">

src/scripts/request.ts

@@ -1,11 +1,46 @@
+import { getAtk, getRtk } from "@/stores/userinfo"
+import { Preferences } from "@capacitor/preferences"
+
 const serviceMap: { [id: string]: string } = {
   interactive: "https://co.solsynth.dev",
   identity: "https://id.solsynth.dev"
 }
 
-export async function request(service: string, input: string, init?: RequestInit) {
+export async function request(service: string, input: string, init?: RequestInit, noRetry?: boolean) {
   const url = buildRequestUrl(service, input)
-  return await fetch(url, init)
+  const res = await fetch(url, init)
+
+  if (res.status === 401 && !noRetry) {
+    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"]
+      })
+    }
+
+    console.info("[REQUEST] Auth context has been refreshed.")
+    return await request(service, input, Object.assign(init as any, {
+      headers: { Authorization: `Bearer ${await getAtk()}` }
+    }), true)
+  }
+
+  return res
 }
 
 export function buildRequestUrl(service: string, input: string) {

src/stores/userinfo.ts

@@ -21,7 +21,11 @@ export async function getAtk() {
   return (await Preferences.get({ key: "identity.access_token" })).value
 }
 
-export async function checkLoggedIn(): boolean {
+export async function getRtk() {
+  return (await Preferences.get({ key: "identity.refresh_token" })).value
+}
+
+export async function checkLoggedIn(): Promise<boolean> {
   return (await Preferences.get({ key: "identity.access_token" })).value != null
 }