优化登录逻辑
This commit is contained in:
@@ -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" />
|
||||
@@ -159,6 +177,10 @@ refreshCaptcha()
|
||||
</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">
|
||||
<a-button
|
||||
|
||||
Reference in New Issue
Block a user