亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码

登錄防重復調用機制

登錄防重復調用機制

?? 問(wèn)題描述

用戶(hù)在登錄過(guò)程中可能出現以下問(wèn)題:

  1. 重復點(diǎn)擊登錄按鈕:網(wǎng)絡(luò )延遲時(shí)用戶(hù)可能多次點(diǎn)擊
  2. 快速重復提交:短時(shí)間內多次嘗試登錄
  3. 并發(fā)登錄請求:可能導致?tīng)顟B(tài)混亂和重復API調用

??? 解決方案

1. 新增防重復狀態(tài)

state: () => ({
  // ...其他狀態(tài)
  isLoggingIn: false,        // ?? 防止重復登錄的標志
  lastLoginAttempt: 0,       // ?? 最后一次登錄嘗試的時(shí)間戳
})

2. 雙重保護機制

?? 登錄鎖機制

if (this.isLoggingIn) {
  throw {
    code: 429,
    message: '正在登錄中,請勿重復提交',
  };
}

?? 冷卻時(shí)間機制

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ò)程日志

?? 正在登錄中,請勿重復提交
?? 登錄操作過(guò)于頻繁,請等待 1 秒后重試
?? 開(kāi)始登錄流程...
?? 發(fā)送登錄請求... { account: "username" }
?? 登錄成功,Token已應用到所有API請求
? 登錄完成: {
  account: "username",
  timestamp: "12:34:56",
  hasToken: true
}
?? 登錄流程結束,釋放登錄鎖

錯誤情況日志

? 登錄失敗: 用戶(hù)名或密碼錯誤
? 登錄過(guò)程中發(fā)生錯誤: NetworkError
?? 登錄流程結束,釋放登錄鎖

?? 防護特性

1. 重復提交保護

  • ? 登錄過(guò)程中阻止新的登錄請求
  • ? 顯示友好的提示信息
  • ? 自動(dòng)釋放鎖機制

2. 頻率限制保護

  • ? 2秒冷卻時(shí)間
  • ? 動(dòng)態(tài)顯示剩余等待時(shí)間
  • ? 防止暴力破解嘗試

3. 狀態(tài)管理保護

  • ? 登錄狀態(tài)的原子性操作
  • ? 異常情況下的狀態(tài)恢復
  • ? 登出時(shí)的狀態(tài)重置

?? 配置選項

冷卻時(shí)間調整

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)監控

// 監控登錄狀態(tài)
watch(() => userStore.isLoggingIn, (isLogging) => {
  if (isLogging) {
    console.log('?? 登錄開(kāi)始');
  } else {
    console.log('?? 登錄結束');
  }
});

??? 安全特性

1. 防暴力破解

  • 冷卻時(shí)間機制限制登錄頻率
  • 詳細的錯誤日志記錄
  • 狀態(tài)鎖防止并發(fā)攻擊

2. 用戶(hù)體驗優(yōu)化

  • 清晰的狀態(tài)反饋
  • 友好的錯誤提示
  • 自動(dòng)狀態(tài)恢復

3. 系統穩定性

  • 防止重復API調用
  • 狀態(tài)一致性保證
  • 異常情況處理

?? 注意事項

  1. 登錄鎖自動(dòng)釋放:無(wú)論成功或失敗,都會(huì )在finally塊中釋放鎖
  2. 冷卻時(shí)間合理設置:2秒是平衡用戶(hù)體驗和安全性的合理值
  3. 錯誤處理完整性:所有異常都會(huì )被捕獲并正確處理
  4. 狀態(tài)持久化:登錄狀態(tài)不會(huì )被持久化,頁(yè)面刷新后會(huì )重置

現在您的登錄系統具備了完整的防重復調用保護機制!??

文章目錄

    亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码