先說對(duì)話框（Dialog）里的表單提交

錯(cuò)誤方案

說起錯(cuò)誤方案，比如，點(diǎn)擊提交按鈕，本地驗(yàn)證，驗(yàn)證通過立即讓按鈕不可點(diǎn)，這些沒問題，而我的錯(cuò)誤點(diǎn)概括是：在某個(gè)最后執(zhí)行的回調(diào)函數(shù)的最后一行，我做了2個(gè)操作：1，隱藏Dialog，2，讓提交按鈕可點(diǎn)擊。

這個(gè)方案看似沒問題，做到了讓對(duì)話框消失，又保證下一次打開Dialog之后，提交按鈕是可點(diǎn)擊的。但它錯(cuò)誤在于：隱藏Dialog是一個(gè)動(dòng)畫過程，并不是瞬間消失，所以按鈕恢復(fù)可點(diǎn)擊之后，Dialog還沒有徹底隱藏，所以只要你點(diǎn)得夠快，就可以多點(diǎn)幾次按鈕。

正確方案

1. 早在打開對(duì)話框的時(shí)候，將提交按鈕可點(diǎn)擊。做法是在<el-dialog>上加入open事件函數(shù)：@open="submitButtonDisabled = false"，其中submitButtonDisabled是我控制提交按鈕的變量，你可以改成你自己用的。
2. 點(diǎn)擊之后驗(yàn)證，通過則立即按鈕不可點(diǎn)（this.submitButtonDisabled = true），不通過則不做任何針對(duì)按鈕的處理。（這是鐵律，下面會(huì)經(jīng)?？吹剑?/li>
3. 驗(yàn)證通過的話，最后執(zhí)行的某個(gè)回調(diào)函數(shù)的最后一行，隱藏對(duì)話框。比如this.dialogFormVisible = false，這個(gè)變量你也要改成自己用的。

它的核心是2點(diǎn)：早在打開對(duì)話框的時(shí)候就讓提交按鈕可點(diǎn)擊；驗(yàn)證通過的話，最后的回調(diào)函數(shù)不應(yīng)該去管提交按鈕恢復(fù)可點(diǎn)擊的事，而是放到下一次打開對(duì)話框的時(shí)候才讓提交按鈕可點(diǎn)擊。

再說不涉及對(duì)話框的提交

不涉及對(duì)話框，比如按鈕在頁面上直接存在，又分三種情況：

1. 點(diǎn)擊之后不跳轉(zhuǎn)，但按鈕消失
2. 點(diǎn)擊之后不跳轉(zhuǎn)，按鈕也不消失
3. 點(diǎn)擊之后跳轉(zhuǎn)頁面

即便是跳轉(zhuǎn)頁面，也是需要時(shí)間的，這個(gè)期間一樣可以重復(fù)提交。不跳轉(zhuǎn)頁面的話，重復(fù)提交就更容易發(fā)生了。怎么辦？

情況1：點(diǎn)擊之后不跳轉(zhuǎn)，但按鈕消失

這種情況出現(xiàn)在小型提交場(chǎng)合，比如在表格中修改數(shù)據(jù)，表格中的某個(gè)單元格有一個(gè)修改按鈕，點(diǎn)擊之后按鈕消失，只留下數(shù)據(jù)自己，而且，不允許有成功提示框，因?yàn)楫吘故切⌒吞峤粓?chǎng)合，而且提交按鈕消失就已經(jīng)代表了成功。

這就是三種不同的狀態(tài)，依次是無數(shù)據(jù)時(shí)、編輯狀態(tài)時(shí)、有數(shù)據(jù)時(shí)

這種情況的處理方案很簡(jiǎn)單：

1. 點(diǎn)擊之后驗(yàn)證，通過則立即不可點(diǎn)，不通過則不針對(duì)按鈕處理
2. 服務(wù)器返回結(jié)果之后，保存成功則按鈕消失，保存失敗則按鈕依舊存在。無論成功失敗，按鈕都要變成可點(diǎn)擊。由于這里按鈕消失是瞬間發(fā)生，沒有動(dòng)畫過程，所以就算按鈕變回可點(diǎn)擊，也因?yàn)樗呀?jīng)消失，因此不會(huì)造成重復(fù)提交。

這里引出一個(gè)問題，就是表格中的小型提交場(chǎng)合，Save按鈕會(huì)有一豎列，如何準(zhǔn)確給某個(gè)按鈕設(shè)置不可點(diǎn)擊呢？可以這樣：

1. 從服務(wù)器獲取表格數(shù)據(jù)之后要做一步加工，遍歷數(shù)據(jù)，加上item.saveButtonDisabled = false之類的語句，然后再賦值給data子對(duì)象。
2. 給按鈕綁定方法時(shí)，要傳參數(shù)，element-ui中可以傳row，也就是@click="clickSave(row)"。
3. 點(diǎn)擊按鈕先驗(yàn)證數(shù)據(jù)，通過則立即row.saveButtonDisabled = true，ajax回調(diào)之后就row.saveButtonDisabled = false，就可以了。

情況2：點(diǎn)擊之后不跳轉(zhuǎn)，按鈕也不消失

比如一個(gè)表單直接顯示在網(wǎng)頁中，無論提交多少次，頁面都紋絲不動(dòng)。

這時(shí)候再按照上面的情況的處理方案就行不通了，因?yàn)楸热?秒數(shù)據(jù)就走了一個(gè)來回，那么我每1.1秒點(diǎn)擊一次鼠標(biāo)就可以無限提交下去。

處理方案：

首先，應(yīng)該避免做這種“無論提交多少次，頁面都紋絲不動(dòng)”的設(shè)定，應(yīng)該做到ajax返回OK之前，提交按鈕是失效的，OK了就讓提交按鈕可點(diǎn)擊，并且要彈個(gè)提示框，這個(gè)提示框就可以阻斷連續(xù)提交。這里面還是有一個(gè)問題就是，如果在返回OK之后、提示框使用了Dialog，那么彈出的過程中點(diǎn)擊了提交按鈕，依然是可以提交的，因?yàn)檫€是那個(gè)動(dòng)畫問題，提示框彈出是需要時(shí)間的。這時(shí)候也好辦，別用Dialog，用MessageBox就可以了，它有回調(diào)函數(shù)，在回調(diào)函數(shù)里讓提交按鈕可點(diǎn)擊，就行了。

然后，如果有些場(chǎng)景下，必須“頁面紋絲不動(dòng)”，提示框都不允許有，那么這時(shí)候可以采用節(jié)流機(jī)制，也就是說按鈕點(diǎn)擊之后3秒內(nèi)就不允許再點(diǎn)擊，即便上一次的提交已經(jīng)1秒完成。方案是：

點(diǎn)擊之后驗(yàn)證，通過則立即不可點(diǎn)，不通過則不針對(duì)按鈕處理

通過之后，設(shè)個(gè)變量resolve = 0，同時(shí)執(zhí)行ajax以及setInterval(fn, 1000)，由fn負(fù)責(zé)判斷：

1. 當(dāng)ajax返回OK，則resolve += 1
2. 當(dāng)ajax返回錯(cuò)誤，則resolve += 2
3. 當(dāng)延遲3秒，則resolve += 1
4. 當(dāng)resolve >= 2則讓按鈕可點(diǎn)，且clearInterval

這是一種比較奇葩的算法，也就是說，OK和3秒同時(shí)具備的話，resolve為2，則讓按鈕可點(diǎn)，只錯(cuò)誤的話，resolve會(huì)等于或大于2，就立即讓按鈕可點(diǎn)，同時(shí)報(bào)錯(cuò)。

如果ajax超時(shí)，比如斷網(wǎng)了，那么也會(huì)返回錯(cuò)誤，只不過這個(gè)錯(cuò)誤可能會(huì)10秒/20秒/30秒/60秒之后返回（根據(jù)你的ajax配置），其實(shí)這也屬于上面說的ajax返回錯(cuò)誤，所以依然是適用的。

情況3：點(diǎn)擊之后跳轉(zhuǎn)頁面

點(diǎn)擊之后跳轉(zhuǎn)頁面也很常見，無奈跳轉(zhuǎn)頁面也是需要時(shí)間的，也可以多次提交。怎么辦？

1. 頁面打開時(shí)，讓按鈕可點(diǎn)（跟對(duì)話框場(chǎng)景道理一樣）
2. 點(diǎn)擊之后驗(yàn)證，通過則立即不可點(diǎn)，不通過則不針對(duì)按鈕處理
3. 通過之后，當(dāng)ajax返回OK，則立即跳轉(zhuǎn)（不去恢復(fù)成可點(diǎn)），這樣鼠標(biāo)重復(fù)點(diǎn)擊多少次都沒事。當(dāng)ajax返回錯(cuò)誤，則彈出錯(cuò)誤，且按鈕恢復(fù)為可點(diǎn)

為什么當(dāng)ajax返回錯(cuò)誤后不防范重復(fù)點(diǎn)擊？

因?yàn)槲覀儗⑵胀ㄓ脩舳x為：非常喜歡點(diǎn)擊鼠標(biāo)，但思維正常的人，既然用戶已經(jīng)看到了提示錯(cuò)誤，當(dāng)然就不會(huì)再重復(fù)點(diǎn)擊了，況且錯(cuò)誤提示往往會(huì)是MessageBox，它會(huì)阻止重復(fù)提交。我們更多的是考慮如何防范鼠標(biāo)連擊的情況。

惡意重復(fù)提交

前端永遠(yuǎn)是防君子，難防小人的，惡意攻擊者想要惡意重復(fù)提交的話，一定會(huì)直接攻擊后端，所以上面所有措施一律無效，還需要后端做措施，這里就不多說了。

最后說說axios攔截提交

根據(jù)網(wǎng)上一些教程，axios攔截提交其實(shí)是有問題的：

• 它的攔截，其實(shí)是在重復(fù)提交的時(shí)候攔截前一次的提交，而我們通常認(rèn)為，應(yīng)該攔截后面發(fā)生的所有提交。
• ajax速度有時(shí)候非?？?，根本來不及攔截。
• api寫的太晦澀了。
  
• 需要考慮多種情況，比如有的時(shí)候允許3秒提交一次，有的時(shí)候隨時(shí)可以提交，攔截規(guī)則越搞越復(fù)雜。

利用URL和params特征判斷是否能解決問題

比如，規(guī)定時(shí)間內(nèi)（比如3秒），或者不設(shè)規(guī)定時(shí)間，只要向同一個(gè)URL發(fā)送同樣的數(shù)據(jù)，就禁止發(fā)送。表面上看起來，似乎防范重復(fù)提交的本質(zhì)就是要阻止同樣的數(shù)據(jù)重復(fù)發(fā)送，但是這里面依然有問題。

比如規(guī)定時(shí)間3秒內(nèi)不能發(fā)送同樣數(shù)據(jù)，那么，如果是axios全局做判斷，就要考慮，會(huì)不會(huì)有其他的ajax穿插在3秒里面，所以說，每次準(zhǔn)備ajax發(fā)送請(qǐng)求，就要遍歷追溯前三秒發(fā)送過的請(qǐng)求里有沒有重復(fù)請(qǐng)求，所以始終要記錄每一次請(qǐng)求，還要記下時(shí)間戳，似乎有些麻煩。如果只是根據(jù)每個(gè)提交事件做統(tǒng)計(jì)，其實(shí)道理一樣，也是要遍歷。

而且，如果用戶每隔4秒點(diǎn)擊一次，而ajax返回用時(shí)5秒，那么第二次請(qǐng)求就真的會(huì)發(fā)出去。

如果不規(guī)定時(shí)間，只要發(fā)送同樣數(shù)據(jù)就一定拒絕，那么，如果用戶不經(jīng)意間，在3分鐘內(nèi)2次提交了相同的內(nèi)容，允許不允許提交呢？比如用戶3分鐘中了2次獎(jiǎng)，填了2次個(gè)人信息，允許提交嗎？按說應(yīng)該允許，因?yàn)橛行﹫?chǎng)合確實(shí)可能存在用戶提交同樣內(nèi)容，但是，現(xiàn)在禁止提交，就阻截了正常提交。最后只能是把攔截規(guī)則越搞越復(fù)雜。

當(dāng)然，最為致命的問題是：用戶體驗(yàn)?zāi)涿?。無論什么技術(shù)，都要把用戶體驗(yàn)放在第一位，如果開發(fā)者不去管按鈕能否點(diǎn)擊，只做背后的攔截邏輯，也就是始終讓按鈕能點(diǎn)擊，用戶毫無疑問會(huì)有很大概率多次點(diǎn)擊，如果趕上ajax慢，用戶會(huì)瘋狂點(diǎn)擊，最后瘋掉也不夸張，這不是我們想要的結(jié)果。

所以說前端攔截重復(fù)提交的最好辦法一定是用正確邏輯控制按鈕的disabled。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論