Optimize: create room

src/router/index.ts

@@ -37,7 +37,7 @@ const router = createRouter({
       meta: { title: "加入房间" }
     },
     {
-      path: "/cinema",
+      path: "/:roomId/cinema",
       name: "cinema",
       component: () => import("../views/Cinema.vue"),
       meta: { title: "影厅" }

src/services/apis/room.ts

@@ -27,15 +27,15 @@ export const createRoomApi = useDefineApi<
   // request
   {
     data: {
-      roomId: string;
+      roomName: string;
       password: string;
-      username: string;
-      userPassword: string;
       hidden: boolean;
     };
+    headers: { Authorization: string };
   },
   // response 服务器返回的 data: {}里面的内容
   {
+    roomId: string;
     token: string;
   }
 >({

src/views/Cinema.vue

@@ -25,6 +25,7 @@ import { strLengthLimit, blobToUin8Array } from "@/utils/utils";
 import MoviePush from "@/components/MoviePush.vue";
 import { ElementMessage, ElementMessageType } from "@/proto/message";
 import customHeaders from "@/components/dialogs/customHeaders.vue";
+import { useRouteParams } from "@vueuse/router";
 
 const customHeadersDialog = ref<InstanceType<typeof customHeaders>>();
 
@@ -39,13 +40,15 @@ const room = roomStore();
 (() => !room.login && router.push("/"))();
 
 // 获取房间信息
-const roomID = localStorage.roomId;
+const roomID = useRouteParams("roomId");
+const roomToken = localStorage.getItem(`room-${roomID.value}-token`) ?? "";
+
 let password = localStorage.password;
 
 // 启动websocket连接
 const wsProtocol = location.protocol === "https:" ? "wss:" : "ws:";
 const { status, data, send } = useWebSocket(`${wsProtocol}//${window.location.host}/api/room/ws`, {
-  protocols: [localStorage.token],
+  protocols: [roomToken],
   autoReconnect: {
     retries: 3,
     delay: 1000,
@@ -72,7 +75,7 @@ const changePassword = async () => {
       data: {
         password: password
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
 
     ElNotification({
@@ -107,7 +110,7 @@ const deleteRoom = async () => {
       data: {
         roomId: localStorage.roomId
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
 
     ElNotification({
@@ -159,7 +162,7 @@ const getMovieList = async () => {
         max: pageSize.value,
         order: order.value
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
 
     if (movieList.value) {
@@ -202,7 +205,7 @@ const getMovies = async () => {
         max: pageSize.value,
         order: order.value
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
 
     if (movies.value) {
@@ -239,7 +242,7 @@ const { execute: reqClearMovieListApi } = clearMovieListApi();
 const clearMovieList = async (id: number) => {
   try {
     await reqClearMovieListApi({
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
     ElNotification({
       title: "已清空",
@@ -269,7 +272,7 @@ const getLiveInfo = async (id: number) => {
       data: {
         id: id
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
 
     liveInfoDialog.value = true;
@@ -327,7 +330,7 @@ const editMovieInfo = async () => {
     }
     await reqEditMovieInfoApi({
       data: cMovieInfo.value,
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
     ElNotification({
       title: "更新成功",
@@ -352,7 +355,7 @@ const deleteMovie = async (ids: Array<number>) => {
       data: {
         ids: ids
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
     for (const id of ids) {
       room.movies.splice(
@@ -386,7 +389,7 @@ const swapMovie = async () => {
         id1: selectMovies.value[0],
         id2: selectMovies.value[1]
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
 
     ElNotification({
@@ -413,7 +416,7 @@ const changeCurrentMovie = async (id: number) => {
       data: {
         id: id
       },
-      headers: { Authorization: localStorage.token }
+      headers: { Authorization: roomToken }
     });
 
     ElNotification({

src/views/CreateRoom.vue

@@ -1,29 +1,21 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { ElNotification, ElMessage } from "element-plus";
-import { roomStore } from "@/stores/room";
 import router from "@/router/index";
 import { createRoomApi } from "@/services/apis/room";
 import { strLengthLimit } from "@/utils/utils";
-const room = roomStore();
 
-const { state: createRoomToken, execute: reqCreateRoomApi } = createRoomApi();
+const { state: createRoomInfo, execute: reqCreateRoomApi } = createRoomApi();
 
 const formData = ref({
-  roomId: "",
+  roomName: "",
   password: "",
-  username: localStorage.getItem("uname") || "",
-  userPassword: "",
   hidden: false
 });
 const savePwd = ref(false);
 
 const operateRoom = async () => {
-  if (
-    formData.value?.username === "" ||
-    formData.value?.userPassword === "" ||
-    formData.value?.roomId === ""
-  ) {
+  if (formData.value?.roomName === "") {
     ElNotification({
       title: "错误",
       message: "请填写表单完整",
@@ -36,28 +28,28 @@ const operateRoom = async () => {
       strLengthLimit(key, 32);
     }
     await reqCreateRoomApi({
-      data: formData.value
+      data: formData.value,
+      headers: {
+        Authorization: localStorage.userToken
+      }
     });
-    if (!createRoomToken.value)
+    if (!createRoomInfo.value)
       return ElNotification({
         title: "错误",
         message: "服务器并未返回token",
         type: "error"
       });
-    localStorage.setItem("token", createRoomToken.value?.token);
+    localStorage.setItem(`room-${createRoomInfo.value.roomId}-token`, createRoomInfo.value?.token);
+
     ElNotification({
       title: "创建成功",
       type: "success"
     });
-    room.login = true;
 
-    localStorage.setItem("uname", formData.value.username);
-    savePwd.value && localStorage.setItem("uPasswd", formData.value.userPassword);
-    localStorage.setItem("roomId", formData.value.roomId);
+    localStorage.setItem("roomName", formData.value.roomName);
     savePwd.value && localStorage.setItem("password", formData.value.password);
-    localStorage.setItem("login", "true");
 
-    router.replace("/cinema");
+    router.replace(`/${createRoomInfo.value.roomId}/cinema`);
   } catch (err: any) {
     console.error(err);
     ElNotification({
@@ -75,21 +67,11 @@ const operateRoom = async () => {
       <input
         class="l-input"
         type="text"
-        v-model="formData.username"
-        placeholder="用户名"
+        v-model="formData.roomName"
+        placeholder="房间名"
         required
       />
       <br />
-      <input
-        class="l-input"
-        type="text"
-        v-model="formData.userPassword"
-        placeholder="密码"
-        required
-      />
-      <br />
-      <input class="l-input" type="text" v-model="formData.roomId" placeholder="房间名" required />
-      <br />
       <input class="l-input" type="password" v-model="formData.password" placeholder="房间密码" />
       <br />
       <div class="text-sm"><b>注意：</b>所有输入框最大只可输入32个字符</div>