Feat: add auth
This commit is contained in:
parent
028df56b70
commit
d0071de4c2
|
@ -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="/"> 首 页 </RouterLink>
|
||||
<RouterLink to="/joinRoom"> 加入房间 </RouterLink>
|
||||
<RouterLink to="/createRoom"> 创建房间 </RouterLink>
|
||||
<RouterLink to="/cinema" v-if="room.login"> 影 厅 </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">
|
||||
首 页
|
||||
</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">
|
||||
影 厅
|
||||
</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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
"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,
|
||||
|
|
Loading…
Reference in New Issue