用戶(hù)在登錄過(guò)程中可能出現以下問(wèn)題:
state: () => ({
// ...其他狀態(tài)
isLoggingIn: false, // ?? 防止重復登錄的標志
lastLoginAttempt: 0, // ?? 最后一次登錄嘗試的時(shí)間戳
})
if (this.isLoggingIn) {
throw {
code: 429,
message: '正在登錄中,請勿重復提交',
};
}
const LOGIN_COOLDOWN = 2 * 1000; // 2秒冷卻時(shí)間
if (this.lastLoginAttempt > 0 && (now - this.lastLoginAttempt) < LOGIN_COOLDOWN) {
const remainingTime = Math.ceil((LOGIN_COOLDOWN - (now - this.lastLoginAttempt)) / 1000);
throw {
code: 429,
message: `登錄操作過(guò)于頻繁,請等待 ${remainingTime} 秒后重試`,
};
}
graph TD
A[用戶(hù)點(diǎn)擊登錄](méi) --> B{檢查是否正在登錄}
B -->|是| C[提示:正在登錄中]
B -->|否| D{檢查冷卻時(shí)間}
D -->|未過(guò)期| E[提示:操作過(guò)于頻繁]
D -->|已過(guò)期| F[設置登錄鎖]
F --> G[驗證表單數據]
G --> H[發(fā)送登錄請求]
H --> I{登錄結果}
I -->|成功| J[更新Token和狀態(tài)]
I -->|失敗| K[拋出錯誤]
J --> L[釋放登錄鎖]
K --> L
L --> M[登錄流程結束]
?? 正在登錄中,請勿重復提交
?? 登錄操作過(guò)于頻繁,請等待 1 秒后重試
?? 開(kāi)始登錄流程...
?? 發(fā)送登錄請求... { account: "username" }
?? 登錄成功,Token已應用到所有API請求
? 登錄完成: {
account: "username",
timestamp: "12:34:56",
hasToken: true
}
?? 登錄流程結束,釋放登錄鎖
? 登錄失敗: 用戶(hù)名或密碼錯誤
? 登錄過(guò)程中發(fā)生錯誤: NetworkError
?? 登錄流程結束,釋放登錄鎖
const LOGIN_COOLDOWN = 2 * 1000; // 可調整為其他值
// 429: Too Many Requests - 請求過(guò)于頻繁
// 401: Unauthorized - 認證失敗
<template>
<t-button
@click="handleLogin"
:loading="userStore.isLoggingIn"
:disabled="userStore.isLoggingIn"
>
{{ userStore.isLoggingIn ? '登錄中...' : '登錄' }}
</t-button>
</template>
<script setup>
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const handleLogin = async () => {
try {
await userStore.login({
account: 'username',
password: 'password'
});
// 登錄成功處理
} catch (error) {
if (error.code === 429) {
// 處理頻率限制錯誤
console.log('請求過(guò)于頻繁:', error.message);
} else {
// 處理其他登錄錯誤
console.log('登錄失敗:', error.message);
}
}
};
</script>
// 監控登錄狀態(tài)
watch(() => userStore.isLoggingIn, (isLogging) => {
if (isLogging) {
console.log('?? 登錄開(kāi)始');
} else {
console.log('?? 登錄結束');
}
});
現在您的登錄系統具備了完整的防重復調用保護機制!??