Feat: auto join room

src/router/index.ts

@@ -30,8 +30,14 @@ const router = createRouter({
       component: () => import("../views/CreateRoom.vue"),
       meta: { title: "创建房间" }
     },
+    // {
+    //   path: "/joinRoom",
+    //   name: "joinRoom",
+    //   component: () => import("../views/JoinRoom.vue"),
+    //   meta: { title: "加入房间" }
+    // },
     {
-      path: "/joinRoom",
+      path: "/joinRoom/:roomId?",
       name: "joinRoom",
       component: () => import("../views/JoinRoom.vue"),
       meta: { title: "加入房间" }

src/services/apis/room.ts

@@ -45,6 +45,21 @@ export const createRoomApi = useDefineApi<
   method: "POST"
 });
 
+// 检查房间状态
+export const checkRoomApi = useDefineApi<
+  {
+    params: {
+      roomId: string;
+    };
+  },
+  {
+    needPassword: boolean;
+    peopleNum: number;
+  }
+>({
+  url: "/api/room/check"
+});
+
 // 加入房间
 export const joinRoomApi = useDefineApi<
   // request

src/utils/requests.ts

@@ -1,19 +1,26 @@
 import axios, { type AxiosRequestConfig } from "axios";
 import { useAsyncState } from "@vueuse/core";
+import { decodeJWT } from "@/utils/utils";
+import router from "@/router";
 
 axios.interceptors.response.use(
   function (response) {
     return response;
   },
   function (error) {
     if (error.response.status === 401) {
-      localStorage.removeItem("userToken");
-      for (const i in localStorage) {
-        if (i.startsWith("room") && i.endsWith("token")) {
-          localStorage.removeItem(i);
+      if (error.config.url.startsWith("/api/movie") || error.config.url.startsWith("/api/room/")) {
+        const { r: roomId } = decodeJWT(error.config.headers.Authorization);
+        router.push(`/joinRoom/${roomId}`);
+      } else {
+        localStorage.removeItem("userToken");
+        for (const i in localStorage) {
+          if (i.startsWith("room") && i.endsWith("token")) {
+            localStorage.removeItem(i);
+          }
         }
+        setTimeout(() => (window.location.href = "/"), 1000);
       }
-      setTimeout(() => (window.location.href = "/"), 1000);
     }
     return Promise.reject(error);
   }

src/utils/utils.ts

@@ -77,3 +77,17 @@ export const blobToUin8Array = (blob: Blob): Promise<Uint8Array> => {
       });
   });
 };
+
+export const decodeJWT = (jwt: string) => {
+  const parts = jwt.split(".");
+  if (parts.length !== 3) {
+    throw new Error("非 JWT 格式！");
+  }
+  try {
+    const decodedPayload = atob(parts[1]);
+    const parsedPayload = JSON.parse(decodedPayload);
+    return parsedPayload;
+  } catch (error) {
+    throw new Error("JWT 解析失败");
+  }
+};

src/views/Cinema.vue

@@ -251,7 +251,7 @@ const clearMovieList = async (id: number) => {
   } catch (err: any) {
     console.error(err);
     ElNotification({
-      title: "清除成功",
+      title: "错误",
       message: err.response.data.error || err.message,
       type: "error"
     });

src/views/JoinRoom.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { ElNotification } from "element-plus";
 import router from "@/router/index";
 import { useRoute } from "vue-router";
-import { joinRoomApi } from "@/services/apis/room";
+import { joinRoomApi, checkRoomApi } from "@/services/apis/room";
 import { strLengthLimit } from "@/utils/utils";
+import { useRouteParams, useRouteQuery } from "@vueuse/router";
 const route = useRoute();
+const roomID = useRouteParams("roomId");
+const pwd = useRouteQuery("pwd");
 
 // 是否为弹窗加载
 const isModal = computed(() => {
@@ -23,14 +26,13 @@ const formData = ref<{
   roomId: string;
   password: string;
 }>({
-  roomId: "",
-  password: ""
+  roomId: (roomID.value as string) ?? "",
+  password: pwd.value as string
 });
 
 if (props.item) formData.value = props.item;
 
 const { state: joinRoomInfo, execute: reqJoinRoomApi } = joinRoomApi();
-
 const JoinRoom = async () => {
   if (!formData.value?.roomId) {
     ElNotification({
@@ -72,6 +74,35 @@ const JoinRoom = async () => {
     });
   }
 };
+
+const { state: thisRoomInfo, execute: reqCheckRoomApi } = checkRoomApi();
+const checkRoom = async () => {
+  try {
+    await reqCheckRoomApi({
+      params: {
+        roomId: formData.value.roomId
+      }
+    });
+    if (thisRoomInfo.value) {
+      if (thisRoomInfo.value.needPassword) {
+        if (pwd.value) await JoinRoom();
+      } else {
+        await JoinRoom();
+      }
+    }
+  } catch (err: any) {
+    console.error(err);
+    ElNotification({
+      title: "错误",
+      message: err.response.data.error || err.message,
+      type: "error"
+    });
+  }
+};
+
+onMounted(() => {
+  if (roomID.value) checkRoom();
+});
 </script>
 
 <template>