更新架构
This commit is contained in:
+87
-84
@@ -1,84 +1,3 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { login } from "@/api/login";
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const account = ref("");
|
||||
const password = ref("");
|
||||
const passwordVisible = ref(false);
|
||||
const rememberMe = ref(false);
|
||||
const loading = ref(false);
|
||||
const errorMsg = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
const savedUser = localStorage.getItem("loginAccount");
|
||||
const savedRemember = localStorage.getItem("loginRememberMe");
|
||||
|
||||
if (savedRemember === "true") {
|
||||
account.value = savedUser;
|
||||
rememberMe.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
errorMsg.value = "";
|
||||
if (!account.value || !password.value) {
|
||||
errorMsg.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
|
||||
// 记住我本地存储
|
||||
if (rememberMe.value) {
|
||||
localStorage.setItem("loginAccount", account.value);
|
||||
localStorage.setItem("loginRememberMe", "true");
|
||||
} else {
|
||||
localStorage.removeItem("loginAccount");
|
||||
localStorage.setItem("loginRememberMe", "false");
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await login(account.value, password.value);
|
||||
if (res && res.code === 200) {
|
||||
authStore.setLoginInfo(res.data);
|
||||
|
||||
// 登录成功后重置 tabs store 为初始状态
|
||||
const { useTabsStore } = await import("@/stores");
|
||||
const tabsStore = useTabsStore();
|
||||
tabsStore.resetTabs();
|
||||
|
||||
// 登录成功后缓存菜单
|
||||
try {
|
||||
} catch (menuError) {
|
||||
console.error("Failed to process login", menuError);
|
||||
// 菜单加载失败不影响登录流程
|
||||
}
|
||||
|
||||
router.push({ path: "/dashboard" });
|
||||
} else {
|
||||
errorMsg.value = res.msg || "登录失败";
|
||||
}
|
||||
} catch (err) {
|
||||
errorMsg.value =
|
||||
err?.response?.data?.msg || err?.message || "登录失败，请重试";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转注册、忘记密码页面
|
||||
const goRegister = () => {
|
||||
router.push({ path: "/register" });
|
||||
};
|
||||
const goForget = () => {
|
||||
router.push({ path: "/forget" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-card">
|
||||
@@ -266,7 +185,86 @@ const goForget = () => {
|
||||
<div class="login-light light2"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { login } from "@/api/login";
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const account = ref("");
|
||||
const password = ref("");
|
||||
const passwordVisible = ref(false);
|
||||
const rememberMe = ref(false);
|
||||
const loading = ref(false);
|
||||
const errorMsg = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
const savedUser = localStorage.getItem("loginAccount");
|
||||
const savedRemember = localStorage.getItem("loginRememberMe");
|
||||
|
||||
if (savedRemember === "true") {
|
||||
account.value = savedUser;
|
||||
rememberMe.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
errorMsg.value = "";
|
||||
if (!account.value || !password.value) {
|
||||
errorMsg.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
|
||||
// 记住我本地存储
|
||||
if (rememberMe.value) {
|
||||
localStorage.setItem("loginAccount", account.value);
|
||||
localStorage.setItem("loginRememberMe", "true");
|
||||
} else {
|
||||
localStorage.removeItem("loginAccount");
|
||||
localStorage.setItem("loginRememberMe", "false");
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await login(account.value, password.value);
|
||||
if (res && res.code === 200) {
|
||||
authStore.setLoginInfo(res.data);
|
||||
|
||||
// 登录成功后重置 tabs store 为初始状态
|
||||
const { useTabsStore } = await import("@/stores");
|
||||
const tabsStore = useTabsStore();
|
||||
tabsStore.resetTabs();
|
||||
|
||||
// 登录成功后缓存菜单
|
||||
try {
|
||||
} catch (menuError) {
|
||||
console.error("登录处理失败", menuError);
|
||||
// 菜单加载失败不影响登录流程
|
||||
}
|
||||
|
||||
router.push({ path: "/home" });
|
||||
} else {
|
||||
errorMsg.value = res.msg || "登录失败";
|
||||
}
|
||||
} catch (err) {
|
||||
errorMsg.value =
|
||||
err?.response?.data?.msg || err?.message || "登录失败，请重试";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转注册、忘记密码页面
|
||||
const goRegister = () => {
|
||||
router.push({ path: "/register" });
|
||||
};
|
||||
const goForget = () => {
|
||||
router.push({ path: "/forget" });
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
min-height: 100vh;
|
||||
@@ -283,7 +281,8 @@ const goForget = () => {
|
||||
min-width: 770px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 8px 36px 0 rgba(73, 150, 255, 0.14),
|
||||
box-shadow:
|
||||
0 8px 36px 0 rgba(73, 150, 255, 0.14),
|
||||
0 1.5px 4px 0 rgba(30, 42, 79, 0.05);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
@@ -408,7 +407,9 @@ const goForget = () => {
|
||||
border: 1.3px solid #d6e6fa;
|
||||
border-radius: 7px;
|
||||
box-sizing: border-box;
|
||||
transition: border 0.2s, box-shadow 0.2s;
|
||||
transition:
|
||||
border 0.2s,
|
||||
box-shadow 0.2s;
|
||||
background: #f7fbfe;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
@@ -457,7 +458,9 @@ const goForget = () => {
|
||||
letter-spacing: 1px;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.13s;
|
||||
transition:
|
||||
background 0.2s,
|
||||
transform 0.13s;
|
||||
}
|
||||
.login-btn:active {
|
||||
transform: scale(0.98);
|
||||
|
||||
Reference in New Issue
Block a user