优化登录逻辑

This commit is contained in:
tao
2025-12-23 13:31:14 +08:00
parent 200e57931a
commit 90d6b542ee

View File

@@ -6,6 +6,8 @@ import type { LoginInfo } from '@/api/system/model'
import type { Rule } from 'ant-design-vue/es/form';
import { useAuthStore } from '@/store';
import { storeToRefs } from 'pinia';
import { getAccount } from '@/utils/auth';
import { decrypt } from '@/utils/jsencrypt';
const authStore = useAuthStore();
const { loginLoading } = storeToRefs(authStore);
@@ -15,13 +17,14 @@ const formData = reactive<LoginInfo>({
username: '',
password: '',
uuid: '',
code: ''
code: '',
})
// 验证码图片
const captchaImg = ref('')
const captchaLoading = ref(false)
const loadCaptchaFail = ref(false)
const rememberMe = ref(false)
// 表单验证规则
const rules: Record<string, Rule[]> = {
@@ -61,16 +64,27 @@ const refreshCaptcha = async () => {
}
}
// 初始化
const initLoginForm = () => {
const { username, password, rememberMe: isRememberMe } = getAccount();
if (isRememberMe && isRememberMe === 'true') {
rememberMe.value = true;
formData.username = username || '';
formData.password = decrypt(password || '') || '';
}
}
// 登录处理
const handleLogin = async () => {
try {
await authStore.authLogin(formData);
await authStore.authLogin(formData, rememberMe.value);
} catch (error: any) {
message.error(error.message || '登录失败');
message.error(error.message || error.msg || '登录失败');
await refreshCaptcha();
}
}
initLoginForm()
// 组件挂载时获取验证码
refreshCaptcha()
</script>
@@ -104,6 +118,7 @@ refreshCaptcha()
placeholder="请输入用户名"
size="large"
class="login-input"
allow-clear
>
<template #prefix>
<i-lucide-user class="input-icon" />
@@ -118,6 +133,8 @@ refreshCaptcha()
placeholder="请输入密码"
size="large"
class="login-input"
:visibility-toggle="false"
allow-clear
>
<template #prefix>
<i-lucide-lock class="input-icon" />
@@ -133,6 +150,7 @@ refreshCaptcha()
placeholder="请输入验证码"
size="large"
class="login-input captcha-input"
allow-clear
>
<template #prefix>
<i-lucide-shield-check class="input-icon" />
@@ -158,6 +176,10 @@ refreshCaptcha()
</div>
</div>
</a-form-item>
<a-form-item name="rememberMe" class="form-item">
<a-checkbox v-model:checked="rememberMe" style="color: #ddd;">记住密码</a-checkbox>
</a-form-item>
<!-- 登录按钮 -->
<a-form-item class="form-item">