Feat: add auth

src/components/Header.vue

@@ -1,10 +1,44 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { RouterLink } from "vue-router";
 import { roomStore } from "@/stores/room";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
 const room = roomStore();
 const mobileMenu = ref(false);
+
+const menuLinks = computed(() => {
+  let links = [
+    {
+      name: "注册",
+      to: "/auth/register"
+    },
+    {
+      name: "登录",
+      to: "/auth/login"
+    }
+  ];
+
+  if (room.login) {
+    const loginLinks = [
+      {
+        name: "加入房间",
+        to: "/joinRoom"
+      },
+      {
+        name: "创建房间",
+        to: "/createRoom"
+      },
+      {
+        name: "影厅",
+        to: "/cinema"
+      }
+    ];
+
+    links = loginLinks;
+  }
+
+  return links;
+});
 </script>
 <template>
   <header class="bg-gray-50 h-16 dark:bg-zinc-900 dark:text-zinc-100">
@@ -42,10 +76,10 @@ const mobileMenu = ref(false);
       </div>
 
       <div class="hidden lg:flex lg:gap-x-12">
-        <RouterLink to="/"> 首&nbsp;&nbsp;&nbsp;&nbsp;页 </RouterLink>
-        <RouterLink to="/joinRoom"> 加入房间 </RouterLink>
-        <RouterLink to="/createRoom"> 创建房间 </RouterLink>
-        <RouterLink to="/cinema" v-if="room.login"> 影&nbsp;&nbsp;&nbsp;&nbsp;厅 </RouterLink>
+        <RouterLink to="/"> 首页 </RouterLink>
+        <RouterLink v-for="(link, index) in menuLinks" :key="index" :to="link.to">{{
+          link.name
+        }}</RouterLink>
       </div>
       <div class="hidden lg:flex lg:flex-1 lg:justify-end">
         <DarkModeSwitcher />
@@ -82,14 +116,14 @@ const mobileMenu = ref(false);
         <div class="mt-6 flow-root">
           <div class="-my-6 divide-y divide-gray-500/10">
             <div class="space-y-2 py-6 moblie-menu">
-              <RouterLink to="/" @click="mobileMenu = false">
-                首&nbsp;&nbsp;&nbsp;&nbsp;页
-              </RouterLink>
-              <RouterLink to="/joinRoom" @click="mobileMenu = false"> 加入房间 </RouterLink>
-              <RouterLink to="/createRoom" @click="mobileMenu = false"> 创建房间 </RouterLink>
-              <RouterLink to="/cinema" @click="mobileMenu = false" v-if="room.login">
-                影&nbsp;&nbsp;&nbsp;&nbsp;厅
-              </RouterLink>
+              <RouterLink to="/" @click="mobileMenu = false"> 首页 </RouterLink>
+              <RouterLink
+                v-for="(link, index) in menuLinks"
+                :key="index"
+                :to="link.to"
+                @click="mobileMenu = false"
+                >{{ link.name }}</RouterLink
+              >
             </div>
             <!-- <div class="py-6">
               <a href="javascript::">关于此项目</a>

src/router/index.ts

@@ -12,6 +12,18 @@ const router = createRouter({
       component: () => import("../views/HomeView.vue"),
       meta: { title: "首页" }
     },
+    {
+      path: "/auth/register",
+      name: "register",
+      component: () => import("../views/auth/Register.vue"),
+      meta: { title: "注册" }
+    },
+    {
+      path: "/auth/login",
+      name: "login",
+      component: () => import("../views/auth/Login.vue"),
+      meta: { title: "登录" }
+    },
     {
       path: "/createRoom",
       name: "createRoom",

src/services/apis/auth.ts

@@ -0,0 +1,33 @@
+import { useDefineApi } from "@/stores/useDefineApi";
+
+// 注册
+export const RegisterApi = useDefineApi<
+  {
+    data: {
+      username: string;
+      password: string;
+    };
+  },
+  {
+    token: string;
+  }
+>({
+  url: "/api/user/signup",
+  method: "POST"
+});
+
+// 登录
+export const LoginApi = useDefineApi<
+  {
+    data: {
+      username: string;
+      password: string;
+    };
+  },
+  {
+    token: string;
+  }
+>({
+  url: "/api/user/login",
+  method: "POST"
+});

src/views/auth/Login.vue

@@ -0,0 +1,114 @@
+<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 { LoginApi } from "@/services/apis/auth";
+import { strLengthLimit } from "@/utils/utils";
+const room = roomStore();
+
+const { state: userToken, execute: reqLoginApi } = LoginApi();
+
+const formData = ref({
+  username: localStorage.getItem("uname") || "",
+  password: localStorage.getItem("password") || ""
+});
+const savePwd = ref(false);
+
+const register = async () => {
+  if (formData.value?.username === "" || formData.value?.password === "") {
+    ElNotification({
+      title: "错误",
+      message: "请填写表单完整",
+      type: "error"
+    });
+    return;
+  }
+  try {
+    for (const key in formData.value) {
+      strLengthLimit(key, 32);
+    }
+    await reqLoginApi({
+      data: formData.value
+    });
+    if (!userToken.value)
+      return ElNotification({
+        title: "错误",
+        message: "服务器并未返回token",
+        type: "error"
+      });
+    localStorage.setItem("userToken", userToken.value?.token);
+    ElNotification({
+      title: "登录成功",
+      type: "success"
+    });
+    room.login = true;
+
+    localStorage.setItem("uname", formData.value.username);
+    savePwd.value && localStorage.setItem("password", formData.value.password);
+    localStorage.setItem("login", "true");
+
+    // router.replace("/cinema");
+  } catch (err: any) {
+    console.error(err);
+    ElNotification({
+      title: "错误",
+      message: err.response.data.error || err.message,
+      type: "error"
+    });
+  }
+};
+</script>
+
+<template>
+  <div class="room">
+    <form @submit.prevent="" class="sm:w-96 w-full">
+      <input
+        class="l-input"
+        type="text"
+        v-model="formData.username"
+        placeholder="用户名"
+        required
+      />
+      <br />
+      <input class="l-input" type="text" v-model="formData.password" placeholder="密码" required />
+      <br />
+      <div class="text-sm"><b>注意：</b>所有输入框最大只可输入32个字符</div>
+      <div>
+        <input class="w-auto" type="checkbox" v-model="savePwd" />
+        <label title="明文保存到本机哦~">&nbsp;记住密码</label>
+      </div>
+      <button class="btn m-[10px]" @click="register()">登录</button>
+    </form>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.room {
+  text-align: center;
+  margin-top: 5vmax;
+
+  form {
+    // width: 443px;
+    margin: auto;
+
+    input {
+      width: 70%;
+
+      &:hover {
+        padding: 10px 15px;
+        width: 74%;
+      }
+    }
+
+    .btn {
+      padding: 10px 15px;
+      width: 70%;
+
+      &:hover {
+        padding: 12px 15px;
+      }
+    }
+  }
+}
+</style>

src/views/auth/Register.vue

@@ -0,0 +1,114 @@
+<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 { RegisterApi } from "@/services/apis/auth";
+import { strLengthLimit } from "@/utils/utils";
+const room = roomStore();
+
+const { state: userToken, execute: reqRegisterApi } = RegisterApi();
+
+const formData = ref({
+  username: localStorage.getItem("uname") || "",
+  password: ""
+});
+const savePwd = ref(false);
+
+const register = async () => {
+  if (formData.value?.username === "" || formData.value?.password === "") {
+    ElNotification({
+      title: "错误",
+      message: "请填写表单完整",
+      type: "error"
+    });
+    return;
+  }
+  try {
+    for (const key in formData.value) {
+      strLengthLimit(key, 32);
+    }
+    await reqRegisterApi({
+      data: formData.value
+    });
+    if (!userToken.value)
+      return ElNotification({
+        title: "错误",
+        message: "服务器并未返回token",
+        type: "error"
+      });
+    localStorage.setItem("userToken", userToken.value?.token);
+    ElNotification({
+      title: "注册成功",
+      type: "success"
+    });
+    room.login = true;
+
+    localStorage.setItem("uname", formData.value.username);
+    savePwd.value && localStorage.setItem("password", formData.value.password);
+    localStorage.setItem("login", "true");
+
+    // router.replace("/cinema");
+  } catch (err: any) {
+    console.error(err);
+    ElNotification({
+      title: "错误",
+      message: err.response.data.error || err.message,
+      type: "error"
+    });
+  }
+};
+</script>
+
+<template>
+  <div class="room">
+    <form @submit.prevent="" class="sm:w-96 w-full">
+      <input
+        class="l-input"
+        type="text"
+        v-model="formData.username"
+        placeholder="用户名"
+        required
+      />
+      <br />
+      <input class="l-input" type="text" v-model="formData.password" placeholder="密码" required />
+      <br />
+      <div class="text-sm"><b>注意：</b>所有输入框最大只可输入32个字符</div>
+      <div>
+        <input class="w-auto" type="checkbox" v-model="savePwd" />
+        <label title="明文保存到本机哦~">&nbsp;记住密码</label>
+      </div>
+      <button class="btn m-[10px]" @click="register()">注册</button>
+    </form>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.room {
+  text-align: center;
+  margin-top: 5vmax;
+
+  form {
+    // width: 443px;
+    margin: auto;
+
+    input {
+      width: 70%;
+
+      &:hover {
+        padding: 10px 15px;
+        width: 74%;
+      }
+    }
+
+    .btn {
+      padding: 10px 15px;
+      width: 70%;
+
+      &:hover {
+        padding: 12px 15px;
+      }
+    }
+  }
+}
+</style>

tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue","src/**/*.ts","src/**/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*","src/**/**/*.vue", "src/**/*.vue","src/**/*.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,