优化登录逻辑
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 type { Rule } from 'ant-design-vue/es/form';
|
||||||
import { useAuthStore } from '@/store';
|
import { useAuthStore } from '@/store';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { getAccount } from '@/utils/auth';
|
||||||
|
import { decrypt } from '@/utils/jsencrypt';
|
||||||
|
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
const { loginLoading } = storeToRefs(authStore);
|
const { loginLoading } = storeToRefs(authStore);
|
||||||
@@ -15,13 +17,14 @@ const formData = reactive<LoginInfo>({
|
|||||||
username: '',
|
username: '',
|
||||||
password: '',
|
password: '',
|
||||||
uuid: '',
|
uuid: '',
|
||||||
code: ''
|
code: '',
|
||||||
})
|
})
|
||||||
|
|
||||||
// 验证码图片
|
// 验证码图片
|
||||||
const captchaImg = ref('')
|
const captchaImg = ref('')
|
||||||
const captchaLoading = ref(false)
|
const captchaLoading = ref(false)
|
||||||
const loadCaptchaFail = ref(false)
|
const loadCaptchaFail = ref(false)
|
||||||
|
const rememberMe = ref(false)
|
||||||
|
|
||||||
// 表单验证规则
|
// 表单验证规则
|
||||||
const rules: Record<string, Rule[]> = {
|
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 () => {
|
const handleLogin = async () => {
|
||||||
try {
|
try {
|
||||||
await authStore.authLogin(formData);
|
await authStore.authLogin(formData, rememberMe.value);
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
message.error(error.message || '登录失败');
|
message.error(error.message || error.msg || '登录失败');
|
||||||
await refreshCaptcha();
|
await refreshCaptcha();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initLoginForm()
|
||||||
// 组件挂载时获取验证码
|
// 组件挂载时获取验证码
|
||||||
refreshCaptcha()
|
refreshCaptcha()
|
||||||
</script>
|
</script>
|
||||||
@@ -104,6 +118,7 @@ refreshCaptcha()
|
|||||||
placeholder="请输入用户名"
|
placeholder="请输入用户名"
|
||||||
size="large"
|
size="large"
|
||||||
class="login-input"
|
class="login-input"
|
||||||
|
allow-clear
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<i-lucide-user class="input-icon" />
|
<i-lucide-user class="input-icon" />
|
||||||
@@ -118,6 +133,8 @@ refreshCaptcha()
|
|||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
size="large"
|
size="large"
|
||||||
class="login-input"
|
class="login-input"
|
||||||
|
:visibility-toggle="false"
|
||||||
|
allow-clear
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<i-lucide-lock class="input-icon" />
|
<i-lucide-lock class="input-icon" />
|
||||||
@@ -133,6 +150,7 @@ refreshCaptcha()
|
|||||||
placeholder="请输入验证码"
|
placeholder="请输入验证码"
|
||||||
size="large"
|
size="large"
|
||||||
class="login-input captcha-input"
|
class="login-input captcha-input"
|
||||||
|
allow-clear
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<i-lucide-shield-check class="input-icon" />
|
<i-lucide-shield-check class="input-icon" />
|
||||||
@@ -159,6 +177,10 @@ refreshCaptcha()
|
|||||||
</div>
|
</div>
|
||||||
</a-form-item>
|
</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-form-item class="form-item">
|
||||||
<a-button
|
<a-button
|
||||||
|
|||||||
Reference in New Issue
Block a user