[web] feat: sessions

Author: Tigercrl

Cargo.lock

@@ -5,15 +5,14 @@ edition = "2024"
 
 [dependencies]
 actix-web = "4"
-env_logger = "0.11.8"
+env_logger = "0.11.9"
 include_dir = "0.7"
-log = "0.4.28"
+log = "0.4.29"
 mime_guess = "2.0.5"
-serde_json = "1.0.145"
-serde = { "version" = "1.0.145", features = ["derive"] }
-rand = "0.9.2"
+serde_json = "1.0.149"
+serde = { "version" = "1.0.149", features = ["derive"] }
+rand = "0.10.0"
 sha2 = "0.10.9"
 hex = "0.4.3"
-jsonwebtoken = { version = "10.2.0", features = ["rust_crypto"] }
-regex = "1.10.5"
+regex = "1.12.3"
 lazy_static = "1.5.0"

apps/web/Cargo.toml

@@ -122,7 +122,7 @@ export function setShouldRegister(value: boolean) {
       }
 
       router.beforeEach((to, _from, next) => {
-        if (useAccount().accessToken) {
+        if (useAccount().token) {
           if (to.path.startsWith("/auth")) next("/");
         } else {
           if (!to.path.startsWith("/auth") && !to.path.startsWith("/welcome"))
@@ -139,13 +139,13 @@ export function setShouldRegister(value: boolean) {
       });
 
       if (
-        !useAccount().accessToken &&
+        !useAccount().token &&
         !router.currentRoute.value.path.startsWith("/auth") &&
         !router.currentRoute.value.path.startsWith("/welcome")
       )
         await router.push("/auth");
 
-      loadingStep.value = t("web.loading.fetch-user");
+      loadingStep.value = t("web.loading.user-fetch");
 
       await useAccount().updateSelfInfo();
       setInterval(

apps/web/src-frontend/index.ts

@@ -87,9 +87,8 @@ export async function requestWithToken<T>(
   data?: any,
   headers?: object,
   requestConfig?: AxiosRequestConfig,
-  autoRefreshToken: boolean = true,
 ): Promise<T> {
-  const token = useAccount().accessToken;
+  const token = useAccount().token;
   if (!token) {
     const err = new ApiError(path, method, "invalid-token");
     await errHandler?.(err);
@@ -99,24 +98,21 @@ export async function requestWithToken<T>(
     path,
     method,
     async (e) => {
-      if (token) {
-        if (e.err == "invalid-token" && autoRefreshToken) {
-          await useAccount().refreshToken();
-          return await requestWithToken(
-            path,
-            method,
-            errHandler,
-            data,
-            headers,
-            requestConfig,
-            false,
-          );
-        }
+      await errHandler?.(e);
 
+      if (token) {
         if (e.err == "permission-denied") await useAccount().updateSelfInfo();
+        if (e.err == "invalid-token") {
+          await useAccount().logout();
+          new MCSLNotif({
+            data: {
+              title: useLocale().getI18n().t("ui.notification.title.warning"),
+              message: useLocale().getI18n().t("web.auth.login.expired"),
+              color: "warning",
+            },
+          }).open();
+        }
       }
-
-      await errHandler?.(e);
     },
     data,
     {
@@ -134,10 +130,8 @@ export class ApiError extends Error {
     public readonly err: string,
     public readonly cause?: any,
   ) {
-    super(
-      useLocale()
-        .getI18n()
-        .t("web.api.error." + err),
-    );
+    const key = "web.api.error." + err;
+    const localized = useLocale().getI18n().t(key);
+    super(key != localized ? localized : err);
   }
 }

apps/web/src-frontend/utils/network.ts

@@ -1,51 +1,26 @@
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
-import {
-  type Serializer,
-  useLocalStorage,
-  useSessionStorage,
-} from "@vueuse/core";
-import { notifyErr, requestApi, requestWithToken } from "./network.ts";
-import { MCSLNotif } from "@repo/ui/src/utils/notifications.ts";
-import { useLocale } from "@repo/ui/src/utils/stores.ts";
+import { useLocalStorage, useSessionStorage } from "@vueuse/core";
+import { notifyErr, requestWithToken } from "./network.ts";
 import router from "@repo/shared/src/router.ts";
 
-export type TokenPair = { access_token: string; refresh_token: string };
-
 export type UserInfo = {
-  id: number;
   name: string;
   permissions: string[];
 };
 
 export const useAccount = defineStore("account", () => {
-  const serializer: Serializer<TokenPair | null> = {
-    write: (token: TokenPair | null) =>
-      token == null ? "" : JSON.stringify(token),
-    read: (token: string) =>
-      token == "" ? null : (JSON.parse(token) as TokenPair),
-  };
-
-  const tokenPermanent = useLocalStorage<TokenPair | null>(
-    "mcsl-web-token",
-    null,
-    { serializer },
-  );
-  const tokenTemporary = useSessionStorage<TokenPair | null>(
+  const tokenPermanent = useLocalStorage<string | null>("mcsl-web-token", null);
+  const tokenTemporary = useSessionStorage<string | null>(
     "mcsl-web-token",
     null,
-    { serializer },
   );
 
   const token = computed(() => {
     return tokenPermanent.value ?? tokenTemporary.value;
   });
 
-  const accessToken = computed(() => {
-    return token.value?.access_token;
-  });
-
-  async function setToken(token: TokenPair | null, isPermanent?: boolean) {
+  async function setToken(token: string | null, isPermanent?: boolean) {
     if (isPermanent === true || isPermanent == undefined) {
       tokenPermanent.value = token;
     }
@@ -61,59 +36,28 @@ export const useAccount = defineStore("account", () => {
     await router.push("/auth");
   }
 
-  async function refreshToken() {
-    if (!token.value) return;
-    try {
-      const res = await requestApi<TokenPair>(
-        "/account/refresh",
-        "POST",
-        async (e) => {
-          if (e.err == "invalid-token") {
-            await logout();
-            const t = useLocale().getI18n().t;
-            new MCSLNotif({
-              data: {
-                title: t("ui.notification.title.warning"),
-                message: t("web.auth.login.expired"),
-                color: "warning",
-              },
-            }).open();
-          } else notifyErr(e, "web.auth.login.refresh-error");
-        },
-        token.value,
-      );
-      await setToken(res, true);
-    } catch {
-      /* ignore */
-    }
-  }
-
   const selfInfo = ref<UserInfo | null>(null);
 
   async function updateSelfInfo() {
-    if (!accessToken.value) {
+    if (!token.value) {
       selfInfo.value = null;
       return;
     }
     try {
       selfInfo.value = await requestWithToken<UserInfo>(
         "/user/self",
         "GET",
-        async (err) => {
-          if (err.err == "invalid-token") await useAccount().refreshToken();
-          else notifyErr(err, "web.user-center.user-fetch-error");
-        },
+        (err) => notifyErr(err, "web.user-center.user-fetch-error"),
       );
     } catch {
       /* ignore */
     }
   }
 
   return {
-    accessToken,
     setToken,
+    token,
     logout,
-    refreshToken,
     selfInfo,
     updateSelfInfo,
   };

apps/web/src-frontend/utils/store.ts

@@ -61,10 +61,7 @@ async function submit() {
       "/account/login",
       "POST",
       (e) => notifyErr(e, "web.auth.login.error"),
-      {
-        username: form.data.value.username,
-        password: form.data.value.password,
-      },
+      form.data.value,
     );
 
     await useAccount().setToken(tokenPair, form.data.value.remember);