feat(account): add forum login and sidebar account entry

src/App.vue

@@ -24,11 +24,18 @@
         :store-filter="storeFilter"
         :sidebar-entries="sidebarEntries"
         :entry-counts="entryCounts"
+        :current-user="currentUser"
         @toggle-theme="toggleTheme"
         @select-tab="selectTab"
         @close="isSidebarOpen = false"
         @list="handleList"
         @update="handleUpdate"
+        @request-login="showLoginModal = true"
+        @open-user-management="openUserManagement"
+        @open-favorites="openFavoriteManagement"
+        @open-forum="openExternalUrl(FLARUM_BASE_URL)"
+        @edit-profile="openExternalUrl(FLARUM_SETTINGS_URL)"
+        @logout="logout"
       />
     </aside>
 
@@ -169,6 +176,23 @@
     <AboutModal :show="showAboutModal" @close="closeAboutModal" />
 
     <SettingsModal :show="showSettingsModal" @close="closeSettingsModal" />
+
+    <LoginModal
+      :show="showLoginModal"
+      :loading="loginLoading"
+      :error="loginError"
+      @close="showLoginModal = false"
+      @login="handleFlarumLogin"
+      @register="openExternalUrl(FLARUM_REGISTER_URL)"
+    />
+
+    <LoginPromptModal
+      :show="showLoginPrompt"
+      :message="loginPromptMessage"
+      @close="showLoginPrompt = false"
+      @login="openLoginFromPrompt"
+      @register="openExternalUrl(FLARUM_REGISTER_URL)"
+    />
   </div>
 </template>
 
@@ -191,8 +215,13 @@ import UninstallConfirmModal from "./components/UninstallConfirmModal.vue";
 import ApmInstallConfirmModal from "./components/ApmInstallConfirmModal.vue";
 import AboutModal from "./components/AboutModal.vue";
 import SettingsModal from "./components/SettingsModal.vue";
+import LoginModal from "./components/LoginModal.vue";
+import LoginPromptModal from "./components/LoginPromptModal.vue";
 import {
   APM_STORE_BASE_URL,
+  FLARUM_BASE_URL,
+  FLARUM_REGISTER_URL,
+  FLARUM_SETTINGS_URL,
   currentApp,
   currentAppSparkInstalled,
   currentAppApmInstalled,
@@ -211,6 +240,14 @@ import {
   rankAppsBySearch,
 } from "./modules/appSearch";
 import { handleInstall, handleRetry } from "./modules/processInstall";
+import { exchangeFlarumToken } from "./modules/backendApi";
+import { requestFlarumToken } from "./modules/flarumAuth";
+import {
+  currentUser,
+  isLoggedIn,
+  logout,
+  setAuthSession,
+} from "./global/authState";
 import {
   getAllowedInstalledOrigin,
   getEffectiveStoreFilter,
@@ -226,6 +263,7 @@ import type {
   CategoryInfo,
   HomeLink,
   HomeList,
+  FlarumLoginPayload,
   SidebarEntry,
   UpdateCenterItem,
 } from "./global/typedefinition";
@@ -289,6 +327,11 @@ const showUninstallModal = ref(false);
 const uninstallTargetApp: Ref<App | null> = ref(null);
 const showAboutModal = ref(false);
 const showSettingsModal = ref(false);
+const showLoginModal = ref(false);
+const loginLoading = ref(false);
+const loginError = ref("");
+const showLoginPrompt = ref(false);
+const loginPromptMessage = ref("请登录星火账号后继续操作。");
 const sparkAvailable = ref(false);
 const apmAvailable = ref(false);
 const sidebarEntries: Ref<SidebarEntry[]> = ref([]);
@@ -1062,6 +1105,51 @@ const closeSettingsModal = () => {
   showSettingsModal.value = false;
 };
 
+const openExternalUrl = (url: string) => {
+  window.open(url, "_blank", "noopener,noreferrer");
+};
+
+const requireLogin = (message: string): boolean => {
+  if (isLoggedIn.value) return true;
+  loginPromptMessage.value = message;
+  showLoginPrompt.value = true;
+  return false;
+};
+
+const openLoginFromPrompt = () => {
+  showLoginPrompt.value = false;
+  showLoginModal.value = true;
+};
+
+const handleFlarumLogin = async (payload: FlarumLoginPayload) => {
+  loginLoading.value = true;
+  loginError.value = "";
+
+  try {
+    const flarumToken = await requestFlarumToken(payload);
+    const session = await exchangeFlarumToken({
+      flarumUserId: flarumToken.userId,
+      flarumToken: flarumToken.token,
+    });
+    setAuthSession(session);
+    showLoginModal.value = false;
+  } catch (error: unknown) {
+    loginError.value = (error as Error)?.message || "登录失败，请稍后重试";
+  } finally {
+    loginLoading.value = false;
+  }
+};
+
+const openUserManagement = () => {
+  if (!requireLogin("请登录后查看和管理账号信息。")) return;
+  showLoginPrompt.value = false;
+};
+
+const openFavoriteManagement = () => {
+  if (!requireLogin("请登录后查看我的收藏。")) return;
+  showLoginPrompt.value = false;
+};
+
 // TODO: 目前 APM 商店不能暂停下载
 const pauseDownload = (id: DownloadItem) => {
   const download = downloads.value.find((d) => d.id === id.id);
@@ -1195,7 +1283,7 @@ const loadSidebarConfig = async () => {
       try {
         const response = await axiosInstance.get(path);
         const data = response.data;
-        const entries = Array.isArray(data) ? data : (data.entries || []);
+        const entries = Array.isArray(data) ? data : data.entries || [];
 
         for (const entry of entries) {
           if (entry.id && entry.name) {
@@ -1249,9 +1337,7 @@ const loadApps = async (onFirstBatch?: () => void) => {
               const path = `/${finalArch}/${category}/applist.json`;
 
               logger.info(`加载分类: ${category} (来源: ${mode})`);
-              const categoryApps = await fetchWithRetry<AppJson[]>(
-                path,
-              );
+              const categoryApps = await fetchWithRetry<AppJson[]>(path);
 
               const normalizedApps = (categoryApps || []).map((appJson) => ({
                 name: appJson.Name,

src/__tests__/unit/AppSidebar.account.test.ts

@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+
+import AppSidebar from "@/components/AppSidebar.vue";
+import type { SparkUser } from "@/global/typedefinition";
+
+const baseProps = {
+  activeTab: "all",
+  categoryCounts: { all: 0 },
+  themeMode: "auto" as const,
+  storeFilter: "both" as const,
+  sparkAvailable: true,
+  apmAvailable: true,
+  sidebarEntries: [],
+  entryCounts: {},
+};
+
+const user: SparkUser = {
+  id: 1,
+  flarumUserId: "123",
+  username: "momen",
+  displayName: "Momen",
+  avatarUrl: "https://bbs.spark-app.store/avatar.png",
+  forumLevel: "管理员",
+  forumGroups: ["管理员"],
+};
+
+describe("AppSidebar account entry", () => {
+  it("prompts login when anonymous", async () => {
+    const rendered = render(AppSidebar, {
+      props: { ...baseProps, currentUser: null },
+    });
+
+    await fireEvent.click(screen.getByRole("button", { name: /登录 \/ 注册/ }));
+
+    expect(rendered.emitted("request-login")).toHaveLength(1);
+  });
+
+  it("opens quick menu for logged-in users", async () => {
+    render(AppSidebar, { props: { ...baseProps, currentUser: user } });
+
+    await fireEvent.click(screen.getByRole("button", { name: /Momen/ }));
+
+    expect(screen.getByText("用户管理")).toBeTruthy();
+    expect(screen.getByText("我的收藏")).toBeTruthy();
+    expect(screen.getByText("退出登录")).toBeTruthy();
+  });
+});

src/__tests__/unit/AppSidebar.test.ts

@@ -16,6 +16,7 @@ const renderSidebar = (
       apmAvailable: true,
       sidebarEntries: [],
       entryCounts: {},
+      currentUser: null,
       ...overrides,
     },
   });

src/__tests__/unit/LoginModal.test.ts

@@ -0,0 +1,23 @@
+import { fireEvent, render, screen } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+
+import LoginModal from "@/components/LoginModal.vue";
+
+describe("LoginModal", () => {
+  it("emits login credentials and register request", async () => {
+    const rendered = render(LoginModal, {
+      props: { show: true, loading: false, error: "" },
+    });
+
+    await fireEvent.update(screen.getByLabelText("论坛账号"), "momen");
+    await fireEvent.update(screen.getByLabelText("论坛密码"), "secret");
+    await fireEvent.click(screen.getByRole("button", { name: "登录" }));
+    await fireEvent.click(screen.getByRole("button", { name: "注册账号" }));
+
+    expect(rendered.emitted("login")?.[0]?.[0]).toEqual({
+      identification: "momen",
+      password: "secret",
+    });
+    expect(rendered.emitted("register")).toHaveLength(1);
+  });
+});

src/__tests__/unit/authState.test.ts

@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+describe("authState", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    localStorage.clear();
+  });
+
+  it("persists and clears a backend session", async () => {
+    const { authSession, currentUser, isLoggedIn, setAuthSession, logout } =
+      await import("@/global/authState");
+
+    setAuthSession({
+      accessToken: "jwt",
+      tokenType: "bearer",
+      user: {
+        id: 1,
+        flarumUserId: "123",
+        username: "momen",
+        displayName: "Momen",
+        avatarUrl: "https://bbs.spark-app.store/avatar.png",
+        forumLevel: "管理员",
+        forumGroups: ["管理员"],
+      },
+    });
+
+    expect(authSession.value?.accessToken).toBe("jwt");
+    expect(currentUser.value?.displayName).toBe("Momen");
+    expect(isLoggedIn.value).toBe(true);
+    expect(
+      JSON.parse(localStorage.getItem("spark-store-auth") || "{}").accessToken,
+    ).toBe("jwt");
+
+    logout();
+
+    expect(authSession.value).toBeNull();
+    expect(isLoggedIn.value).toBe(false);
+    expect(localStorage.getItem("spark-store-auth")).toBeNull();
+  });
+});

src/components/AccountQuickMenu.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="absolute left-0 right-0 top-full z-20 mt-2 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-slate-700 dark:bg-slate-900"
+  >
+    <button
+      type="button"
+      class="quick-menu-item"
+      @click="emit('open-user-management')"
+    >
+      <i class="fas fa-user-cog"></i>
+      <span>用户管理</span>
+    </button>
+    <button
+      type="button"
+      class="quick-menu-item"
+      @click="emit('open-favorites')"
+    >
+      <i class="fas fa-heart"></i>
+      <span>我的收藏</span>
+    </button>
+    <button type="button" class="quick-menu-item" @click="emit('open-forum')">
+      <i class="fas fa-comments"></i>
+      <span>论坛首页</span>
+    </button>
+    <button type="button" class="quick-menu-item" @click="emit('edit-profile')">
+      <i class="fas fa-id-card"></i>
+      <span>修改论坛资料</span>
+    </button>
+    <button
+      type="button"
+      class="quick-menu-item text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+      @click="emit('logout')"
+    >
+      <i class="fas fa-sign-out-alt"></i>
+      <span>退出登录</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+  "open-user-management": [];
+  "open-favorites": [];
+  "open-forum": [];
+  "edit-profile": [];
+  logout: [];
+}>();
+</script>
+
+<style scoped>
+.quick-menu-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  border-radius: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #475569;
+  transition: all 0.15s ease;
+}
+
+.quick-menu-item:hover {
+  background: rgba(0, 113, 227, 0.06);
+  color: #0071e3;
+}
+
+.dark .quick-menu-item {
+  color: #cbd5e1;
+}
+
+.dark .quick-menu-item:hover {
+  background: rgba(64, 156, 255, 0.1);
+  color: #409cff;
+}
+</style>

src/components/AppSidebar.vue

@@ -1,21 +1,44 @@
 <template>
   <div class="flex h-full flex-col gap-6">
-    <div class="flex items-center justify-between gap-3">
-      <div class="flex items-center gap-3">
+    <div class="flex items-start justify-between gap-3">
+      <div class="relative min-w-0 flex-1">
+        <button
+          type="button"
+          class="flex w-full min-w-0 items-center gap-3 rounded-2xl p-1 text-left transition hover:bg-slate-100 dark:hover:bg-slate-800"
+          :aria-label="accountLabel"
+          @click="handleAccountClick"
+        >
           <img
+            v-if="!currentUser || !currentUser.avatarUrl"
             :src="amberLogo"
             alt="Amber PM"
             class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800"
           />
+          <img
+            v-else
+            :src="currentUser.avatarUrl"
+            :alt="accountLabel"
+            class="h-11 w-11 rounded-2xl object-cover shadow-sm ring-1 ring-slate-900/5"
+          />
           <div class="flex flex-col">
             <span
               class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
-            >Spark Store</span
+              >{{ currentUser ? currentUser.forumLevel : "Spark Store" }}</span
             >
-          <span class="text-lg font-semibold text-slate-900 dark:text-white"
-            >星火应用商店</span
+            <span
+              class="text-lg font-semibold text-slate-900 dark:text-white"
+              >{{ accountLabel }}</span
             >
           </div>
+        </button>
+        <AccountQuickMenu
+          v-if="currentUser && showAccountMenu"
+          @open-user-management="emit('open-user-management')"
+          @open-favorites="emit('open-favorites')"
+          @open-forum="emit('open-forum')"
+          @edit-profile="emit('edit-profile')"
+          @logout="emit('logout')"
+        />
       </div>
       <div class="flex items-center gap-1">
         <ThemeToggle :theme-mode="themeMode" @toggle="toggleTheme" />
@@ -105,10 +128,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import AccountQuickMenu from "./AccountQuickMenu.vue";
 import ThemeToggle from "./ThemeToggle.vue";
 import amberLogo from "../assets/imgs/spark-store.svg";
-import type { SidebarEntry } from "../global/typedefinition";
+import type { SidebarEntry, SparkUser } from "../global/typedefinition";
 
 const props = defineProps<{
   activeTab: string;
@@ -119,6 +143,7 @@ const props = defineProps<{
   storeFilter: "spark" | "apm" | "both";
   sidebarEntries: SidebarEntry[];
   entryCounts: Record<string, number>;
+  currentUser: SparkUser | null;
 }>();
 
 const emit = defineEmits<{
@@ -127,8 +152,31 @@ const emit = defineEmits<{
   (e: "close"): void;
   (e: "list"): void;
   (e: "update"): void;
+  (e: "request-login"): void;
+  (e: "open-user-management"): void;
+  (e: "open-favorites"): void;
+  (e: "open-forum"): void;
+  (e: "edit-profile"): void;
+  (e: "logout"): void;
 }>();
 
+const showAccountMenu = ref(false);
+
+const accountLabel = computed(() => {
+  return props.currentUser
+    ? props.currentUser.displayName || props.currentUser.username
+    : "登录 / 注册";
+});
+
+const handleAccountClick = () => {
+  if (!props.currentUser) {
+    emit("request-login");
+    return;
+  }
+
+  showAccountMenu.value = !showAccountMenu.value;
+};
+
 const toggleTheme = () => {
   emit("toggle-theme");
 };

src/components/LoginModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="show"
+        class="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+        @click.self="emit('close')"
+      >
+        <form
+          class="w-full max-w-md rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-700 dark:bg-slate-900"
+          @submit.prevent="submitLogin"
+        >
+          <div class="mb-6">
+            <h2 class="text-2xl font-bold text-slate-900 dark:text-white">
+              登录星火账号
+            </h2>
+            <p
+              class="mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400"
+            >
+              使用论坛账号登录。密码仅直接提交到星火论坛用于换取论坛令牌，不会发送给商店后端。
+            </p>
+          </div>
+
+          <label class="mb-4 block">
+            <span
+              class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200"
+            >
+              论坛账号
+            </span>
+            <input
+              v-model="identification"
+              type="text"
+              autocomplete="username"
+              class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-slate-900 outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+            />
+          </label>
+
+          <label class="mb-4 block">
+            <span
+              class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200"
+            >
+              论坛密码
+            </span>
+            <input
+              v-model="password"
+              type="password"
+              autocomplete="current-password"
+              class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-slate-900 outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+            />
+          </label>
+
+          <p v-if="error" class="mb-4 text-sm text-red-600 dark:text-red-400">
+            {{ error }}
+          </p>
+
+          <div class="flex items-center justify-between gap-3">
+            <button
+              type="button"
+              class="rounded-xl px-4 py-2 text-sm font-medium text-slate-500 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+              @click="emit('register')"
+            >
+              注册账号
+            </button>
+            <div class="flex items-center gap-3">
+              <button
+                type="button"
+                class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+                @click="emit('close')"
+              >
+                取消
+              </button>
+              <button
+                type="submit"
+                class="rounded-xl bg-brand px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand/90 disabled:cursor-not-allowed disabled:opacity-60"
+                :disabled="loading"
+              >
+                {{ loading ? "登录中..." : "登录" }}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import type { FlarumLoginPayload } from "@/global/typedefinition";
+
+defineProps<{
+  show: boolean;
+  loading: boolean;
+  error: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  login: [payload: FlarumLoginPayload];
+  register: [];
+}>();
+
+const identification = ref("");
+const password = ref("");
+
+const submitLogin = () => {
+  emit("login", {
+    identification: identification.value.trim(),
+    password: password.value,
+  });
+};
+</script>

src/components/LoginPromptModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="show"
+        class="fixed inset-0 z-[85] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+        @click.self="emit('close')"
+      >
+        <div
+          class="w-full max-w-sm rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-700 dark:bg-slate-900"
+        >
+          <h2 class="text-xl font-bold text-slate-900 dark:text-white">
+            需要登录
+          </h2>
+          <p class="mt-3 text-sm leading-6 text-slate-500 dark:text-slate-400">
+            {{ message }}
+          </p>
+          <div class="mt-6 flex items-center justify-end gap-3">
+            <button
+              type="button"
+              class="rounded-xl px-4 py-2 text-sm font-medium text-slate-500 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+              @click="emit('register')"
+            >
+              注册账号
+            </button>
+            <button
+              type="button"
+              class="rounded-xl bg-brand px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand/90"
+              @click="emit('login')"
+            >
+              登录
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  show: boolean;
+  message: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  login: [];
+  register: [];
+}>();
+</script>

src/global/authState.ts

@@ -0,0 +1,62 @@
+import { computed, ref } from "vue";
+
+import { setBackendToken } from "@/modules/backendApi";
+import type { AuthSession, SparkUser } from "./typedefinition";
+
+const AUTH_STORAGE_KEY = "spark-store-auth";
+
+const isSparkUser = (value: unknown): value is SparkUser => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const user = value as Record<string, unknown>;
+  return (
+    typeof user.id === "number" &&
+    typeof user.flarumUserId === "string" &&
+    typeof user.username === "string" &&
+    typeof user.displayName === "string" &&
+    typeof user.avatarUrl === "string" &&
+    typeof user.forumLevel === "string" &&
+    Array.isArray(user.forumGroups) &&
+    user.forumGroups.every((group) => typeof group === "string")
+  );
+};
+
+const isAuthSession = (value: unknown): value is AuthSession => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const session = value as Record<string, unknown>;
+  return (
+    typeof session.accessToken === "string" &&
+    session.accessToken.length > 0 &&
+    session.tokenType === "bearer" &&
+    isSparkUser(session.user)
+  );
+};
+
+const loadStoredSession = (): AuthSession | null => {
+  const raw = localStorage.getItem(AUTH_STORAGE_KEY);
+  if (!raw) return null;
+
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    return isAuthSession(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+};
+
+export const authSession = ref<AuthSession | null>(loadStoredSession());
+export const currentUser = computed(() => authSession.value?.user ?? null);
+export const isLoggedIn = computed(() => authSession.value !== null);
+
+setBackendToken(authSession.value?.accessToken ?? null);
+
+export const setAuthSession = (session: AuthSession): void => {
+  authSession.value = session;
+  localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(session));
+  setBackendToken(session.accessToken);
+};
+
+export const logout = (): void => {
+  authSession.value = null;
+  localStorage.removeItem(AUTH_STORAGE_KEY);
+  setBackendToken(null);
+};

src/modules/backendApi.ts

@@ -131,8 +131,14 @@ const toSyncedAppList = (
 });
 
 export const setBackendToken = (token: string | null): void => {
-  if (token) backend.defaults.headers.common.Authorization = `Bearer ${token}`;
-  else delete backend.defaults.headers.common.Authorization;
+  const backendWithOptionalDefaults = backend as typeof backend & {
+    defaults?: { headers?: { common?: Record<string, unknown> } };
+  };
+  const commonHeaders = backendWithOptionalDefaults.defaults?.headers?.common;
+  if (!commonHeaders) return;
+
+  if (token) commonHeaders.Authorization = `Bearer ${token}`;
+  else delete commonHeaders.Authorization;
 };
 
 export const exchangeFlarumToken = async (payload: {

src/modules/flarumAuth.ts

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+import { FLARUM_BASE_URL } from "@/global/storeConfig";
+import type { FlarumLoginPayload } from "@/global/typedefinition";
+
+type FlarumTokenResponse = {
+  token: string;
+  userId: string;
+};
+
+const asRecord = (value: unknown): Record<string, unknown> => {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return value as Record<string, unknown>;
+  }
+  return {};
+};
+
+export const requestFlarumToken = async (
+  payload: FlarumLoginPayload,
+): Promise<FlarumTokenResponse> => {
+  const response = await axios.post(`${FLARUM_BASE_URL}/api/token`, payload);
+  const data = asRecord(response.data);
+
+  return {
+    token: String(data.token || ""),
+    userId: String(data.userId || data.user_id || ""),
+  };
+};