Feat: add auth
This commit is contained in:
parent
028df56b70
commit
d0071de4c2
|
@ -1,10 +1,44 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import { RouterLink } from "vue-router";
|
import { RouterLink } from "vue-router";
|
||||||
import { roomStore } from "@/stores/room";
|
import { roomStore } from "@/stores/room";
|
||||||
import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
|
import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
|
||||||
const room = roomStore();
|
const room = roomStore();
|
||||||
const mobileMenu = ref(false);
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<header class="bg-gray-50 h-16 dark:bg-zinc-900 dark:text-zinc-100">
|
<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>
|
||||||
|
|
||||||
<div class="hidden lg:flex lg:gap-x-12">
|
<div class="hidden lg:flex lg:gap-x-12">
|
||||||
<RouterLink to="/"> 首 页 </RouterLink>
|
<RouterLink to="/"> 首页 </RouterLink>
|
||||||
<RouterLink to="/joinRoom"> 加入房间 </RouterLink>
|
<RouterLink v-for="(link, index) in menuLinks" :key="index" :to="link.to">{{
|
||||||
<RouterLink to="/createRoom"> 创建房间 </RouterLink>
|
link.name
|
||||||
<RouterLink to="/cinema" v-if="room.login"> 影 厅 </RouterLink>
|
}}</RouterLink>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||||
<DarkModeSwitcher />
|
<DarkModeSwitcher />
|
||||||
|
@ -82,14 +116,14 @@ const mobileMenu = ref(false);
|
||||||
<div class="mt-6 flow-root">
|
<div class="mt-6 flow-root">
|
||||||
<div class="-my-6 divide-y divide-gray-500/10">
|
<div class="-my-6 divide-y divide-gray-500/10">
|
||||||
<div class="space-y-2 py-6 moblie-menu">
|
<div class="space-y-2 py-6 moblie-menu">
|
||||||
<RouterLink to="/" @click="mobileMenu = false">
|
<RouterLink to="/" @click="mobileMenu = false"> 首页 </RouterLink>
|
||||||
首 页
|
<RouterLink
|
||||||
</RouterLink>
|
v-for="(link, index) in menuLinks"
|
||||||
<RouterLink to="/joinRoom" @click="mobileMenu = false"> 加入房间 </RouterLink>
|
:key="index"
|
||||||
<RouterLink to="/createRoom" @click="mobileMenu = false"> 创建房间 </RouterLink>
|
:to="link.to"
|
||||||
<RouterLink to="/cinema" @click="mobileMenu = false" v-if="room.login">
|
@click="mobileMenu = false"
|
||||||
影 厅
|
>{{ link.name }}</RouterLink
|
||||||
</RouterLink>
|
>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="py-6">
|
<!-- <div class="py-6">
|
||||||
<a href="javascript::">关于此项目</a>
|
<a href="javascript::">关于此项目</a>
|
||||||
|
|
|
@ -12,6 +12,18 @@ const router = createRouter({
|
||||||
component: () => import("../views/HomeView.vue"),
|
component: () => import("../views/HomeView.vue"),
|
||||||
meta: { title: "首页" }
|
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",
|
path: "/createRoom",
|
||||||
name: "createRoom",
|
name: "createRoom",
|
||||||
|
|
|
@ -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"
|
||||||
|
});
|
|
@ -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="明文保存到本机哦~"> 记住密码</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>
|
|
@ -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="明文保存到本机哦~"> 记住密码</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>
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
"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__/*"],
|
"exclude": ["src/**/__tests__/*"],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
|
|
Loading…
Reference in New Issue