From 4b0f23283e701047c66c05faa6b19854bddef5b9 Mon Sep 17 00:00:00 2001 From: MoYi <1545929126@qq.com> Date: Mon, 20 Nov 2023 23:30:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7=E7=BC=93?= =?UTF-8?q?=E5=AD=98=E5=AE=89=E5=85=A8,=E5=A2=9E=E5=8A=A0=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 2 + src/views/AppMobile.vue | 241 +++++++++++++++++++++++++++++++++++----- 2 files changed, 217 insertions(+), 26 deletions(-) diff --git a/components.d.ts b/components.d.ts index 91401c0..9ca6ddc 100644 --- a/components.d.ts +++ b/components.d.ts @@ -8,9 +8,11 @@ export {} declare module 'vue' { export interface GlobalComponents { ElButton: typeof import('element-plus/es')['ElButton'] + ElIcon: typeof import('element-plus/es')['ElIcon'] ElPagination: typeof import('element-plus/es')['ElPagination'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] + ElUpload: typeof import('element-plus/es')['ElUpload'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] VanButton: typeof import('vant/es')['Button'] diff --git a/src/views/AppMobile.vue b/src/views/AppMobile.vue index d425bd8..8edfe23 100644 --- a/src/views/AppMobile.vue +++ b/src/views/AppMobile.vue @@ -14,19 +14,17 @@ - + - + + + + + +
- + @@ -95,10 +132,16 @@ import {File} from "../entities/File"; // TODO: 头部组件定义变量 const inputFileName = ref(''); const userAvatarLoginShow = ref(false); +const userAvatarLoginShowTools = ref(false); const userName = ref(""); const userPassword = ref(""); const isAdmin = ref(false); // 是否是管理员 +// TODO: 用户属性 +const userNameToolsId = ref(0); +const userNameToolsName = ref("未登录"); +const userNameToolsAuth = ref("未登录"); + // TODO: 分页属性配置 const currentPage = ref(1); const pageSize = ref(18); @@ -107,28 +150,141 @@ const totalFiles = ref(0); // TODO: 用户登录弹窗 const toggleUserLogin = () => { - userAvatarLoginShow.value = !userAvatarLoginShow.value; - // 切换用户登录弹窗的显示状态 + if (sessionStorage.getItem("userInfo") || localStorage.getItem("userInfo")) { + // 如果本地存储中有用户信息，即用户已登录 + // 显示用户信息窗口并隐藏登录窗口 + userAvatarLoginShowTools.value = true; + userAvatarLoginShow.value = false; + } else { + // 如果用户未登录，切换登录窗口的显示状态 + userAvatarLoginShow.value = !userAvatarLoginShow.value; + userAvatarLoginShowTools.value = false; + } +}; + + +// TODO: 用户配置 +const logout = () => { + // 清除本地存储中的用户信息 + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + + // 刷新页面 + window.location.reload(); }; // TODO: 用户登录接口 const userLogin = () => { + // 清理本地cookie + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + // 用户登录函数 if (userName.value == "" || userPassword.value == "") { ElMessage.error("用户名密码不能为空"); + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); return; } - login(userName.value, userPassword.value).then((res: AxiosResponse>) => { - // 发送登录请求 - if (res.data.status == 200) { - ElMessage.success("登录成功!") - toggleUserLogin(); // Close the login popup - } else { - ElMessage.error("登录失败,用户名密码错误!") - } - }).catch(() => { - ElMessage.error("登录失败,用户名密码错误!") - }) + login(userName.value, userPassword.value) + .then((res: AxiosResponse>) => { + // 发送登录请求 + if (res.data.status == 200) { + // 登录成功 + // 存储用户信息到sessionStorage + const userInfo = { + userName: userName.value, + userPassword: userPassword.value, + }; + sessionStorage.setItem("userInfo", JSON.stringify(userInfo)); + console.log(res.data.data.name, res.data.data.id, res.data.data.auth); + userNameToolsId.value = Number(res.data.data.id); + userNameToolsName.value = String(res.data.data.name); + userNameToolsAuth.value = String(res.data.data.auth) + // 延迟一段时间后显示用户信息窗口 + setTimeout(() => { + toggleUserLogin(); + }, 1000); // 1000毫秒（1秒）延迟示例 + + ElMessage.success("登录成功!"); + } else { + ElMessage.error("登录失败,用户名密码错误!"); + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + } + }) + .catch(() => { + ElMessage.error("登录失败,用户名密码错误!"); + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + }); +}; + + +// 在页面加载时检查本地存储中的用户信息 +let checkedStorage = false; +const checkLocalStorageUserInfo = () => { + if (checkedStorage) { + return; // 如果已经检查过，不再重复执行 + } + const userInfoString = localStorage.getItem("userInfo"); + if (userInfoString) { + // 解析用户信息 + const userInfo = JSON.parse(userInfoString); + userName.value = userInfo.userName; + userPassword.value = userInfo.userPassword; + + // 验证用户信息 + verifyUserInfo(); + } +}; +// 在页面加载时检查sessionStorage中的用户信息 +const checkSessionStorageUserInfo = () => { + if (checkedStorage) { + return; // 如果已经检查过，不再重复执行 + } + const userInfoString = sessionStorage.getItem("userInfo"); + if (userInfoString) { + // 解析用户信息 + const userInfo = JSON.parse(userInfoString); + userName.value = userInfo.userName; + userPassword.value = userInfo.userPassword; + + // 验证用户信息 + verifyUserInfo(); + } +}; +// 验证用户信息 +const verifyUserInfo = () => { + if (userName.value === "" || userPassword.value === "") { + return; // 用户名或密码为空，不进行验证 + } + + login(userName.value, userPassword.value) + .then((res: AxiosResponse>) => { + if (res.data.status === 200) { + console.log(res.data.data.name, res.data.data.id, res.data.data.auth); + userNameToolsId.value = Number(res.data.data.id); + userNameToolsName.value = String(res.data.data.name); + userNameToolsAuth.value = String(res.data.data.auth) + ElMessage.success("登录成功!"); + userAvatarLoginShowTools.value = true; // 验证成功，显示用户信息窗口 + userAvatarLoginShow.value = false; // 隐藏登录窗口 + } else { + ElMessage.error("验证失败，请重新登录!"); + userAvatarLoginShowTools.value = false; // 验证失败，隐藏用户信息窗口 + userAvatarLoginShow.value = true; // 显示登录窗口 + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + } + }) + .catch(() => { + ElMessage.error("验证失败，请重新登录!"); + userAvatarLoginShowTools.value = false; // 验证失败，隐藏用户信息窗口 + userAvatarLoginShow.value = true; // 显示登录窗口 + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + }); }; // TODO: 用户注册接口 @@ -146,6 +302,34 @@ const userEnroll = () => { case 501: ElMessage.error("存在同名用户！"); break; + case 200: + ElMessage.success("注册成功"); + login(userName.value, userPassword.value) + .then((res: AxiosResponse>) => { + if (res.data.status === 200) { + console.log(res.data.data.name, res.data.data.id, res.data.data.auth); + userNameToolsId.value = Number(res.data.data.id); + userNameToolsName.value = String(res.data.data.name); + userNameToolsAuth.value = String(res.data.data.auth) + ElMessage.success("登录成功!"); + userAvatarLoginShowTools.value = true; // 验证成功，显示用户信息窗口 + userAvatarLoginShow.value = false; // 隐藏登录窗口 + } else { + ElMessage.error("验证失败，请重新登录!"); + userAvatarLoginShowTools.value = false; // 验证失败，隐藏用户信息窗口 + userAvatarLoginShow.value = true; // 显示登录窗口 + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + } + }) + .catch(() => { + ElMessage.error("验证失败，请重新登录!"); + userAvatarLoginShowTools.value = false; // 验证失败，隐藏用户信息窗口 + userAvatarLoginShow.value = true; // 显示登录窗口 + localStorage.removeItem("userInfo"); + sessionStorage.removeItem("userInfo"); + }); + break; default: ElMessage.error("无法注册！"); } @@ -163,6 +347,8 @@ const fetchFiles = (current?: number) => { }) } +// TODO: 上传文件 + // TODO: 查看文件属性 const handleShowDetail = () => { console.log("查看文件属性接口"); @@ -181,6 +367,9 @@ const handleDelete = () => { // TODO: 实时更新 onMounted(() => { fetchFiles(); + checkSessionStorageUserInfo(); + checkLocalStorageUserInfo(); + checkedStorage = true; })