怎么预防按钮的重复点击？

<p>先看看在那些场景会导致重复请求： </p><ol><li>手速快，不小心双击操作按钮。 </li><li>很小心的点击了一次按钮，因为请求响应比较慢，页面没有任何提示，怀疑上次点击没生效，再次点击操作按钮。 </li><li>很小心的点击了一次按钮，因为请求响应比较慢，页面没有任何提示，刷新页面，再次点击操作按钮。</li></ol><h4>前端方案</h4><p>我们可以对症下药： </p><ol><li>控制按钮，在短时间内被多次点击，第一次以后的点击无效。 </li><li>控制按钮，在点击按钮触发的请求响应之前，再次点击无效。 </li><li>配置特殊的URL，然后控制这些URL请求的最小时间间隔。如果再次请求跟前一次请求间隔很小，弹窗二次提示，是否继续操作。</li></ol><h4>防止无意识重复点击按钮</h4><p>给按钮添加控制，在<code>control</code> 毫秒内，第一次点击事件之后的点击事件不执行。</p><pre><code class="language-text">&lt;template&gt;
    &lt;button @click="handleClick"&gt;&lt;/button&gt;
&lt;/templage&gt;
&lt;script&gt;
export default {
    methods: {
        handleClick(event) {
            if (this.disabled) return;
            if (this.notAllowed) return;
            // 点击完多少秒不能继续点
            this.notAllowed = true;
            setTimeout(()=&gt;{
                this.notAllowed = false;
            }, this.control)
            this.$emit('click', event, this);
        }
    }
}
&lt;/script&gt;</code></pre><p>当然时间间隔可以设置，默认为300毫秒。我们无意识的重复点击一般在300毫秒以内。</p><h4>按钮点击立马禁用，等响应回来才能继续点击</h4><p>触发点击的button实例传入fetch配置，代码如下：</p><pre><code class="language-js">doQuery: function (button) {
    this.FesApi.fetch(`generalcard/query`, {
        sub_card_type: this.query.sub_card_type,
        code_type: this.query.code_type,
        title: this.query.title,
        card_id: this.query.card_id,
        page_info: {
            pageSize: this.paginationOption.page_info.pageSize,
            currentPage: this.paginationOption.page_info.currentPage
        }
    }, {
        //看这里，加上下面一行代码就行。。so easy
        button: button
    }).then(rst =&gt; {
        // 成功处理
    });
}
</code></pre><p>在fetch函数内部，设置button的<code>disabled=true</code>，当响应回来时，设置<code>disabled=false</code>代码如下：</p><pre><code class="language-js">const action = function (url, data, option) {
    // 如果传了button
    if (option.button) {
        option.button.currentDisabled = true;
    }
    // 记录日志
    const log = requsetLog.creatLog(url, data);

return param(url, data, option)
        .then(success, fail)
        .then((response) =&gt; {
            requsetLog.changeLogStatus(log, 'success');
            if (option && option.button) {
                option.button.currentDisabled = false;
            }
            return response;
        })
        .catch((error) =&gt; {
            requsetLog.changeLogStatus(log, 'fail');
            if (option && option.button) {
                option.button.currentDisabled = false;
            }
            error.message && window.Toast.error(error.message);
            throw error;
        });
};
</code></pre><h4>从根本入手，一招击杀</h4><p>当页面刷新，页面状态重置，此时再次点击按钮，会判定为初次点击，而且按钮状态恢复可点击。我们可以设置哪些请求地址是重要的，它们请求间隔不能过小。如果过小，页面弹出覆层询问用户时候继续执行。 </p><p>设置代码如下：</p><pre><code class="language-js">this.FesApi.setImportant({
    'generalcard/action': {
        control: 10000,
        message: '您在十秒内重复发起手工清算操作，是否继续？'
    }
})
</code></pre><p>而实现代码如下：</p><pre><code class="language-js">api.fetch = function (url, data, option) {
    if (requsetLog.importantApi[url]) {
        const logs = requsetLog.getLogByURL(url, data);
        if (logs.length &gt; 0) {
            const compareLog = logs[logs.length - 1];
            if (compareLog.status === 'compare') {
                requsetLog.creatLog(url, data, 'notAllowed');
                return {
                    then: () =&gt; {}
                };
            }
            const importantApiOption = requsetLog.importantApi[url];
            const control = importantApiOption.control || 10000;
            const message = importantApiOption.message || util.format('fesMessages.importInterfaceTip', { s: control / 1000 });
            if (new Date().getTime() - compareLog.timestamp &lt; control) {
                const oldStatus = compareLog.status;
                requsetLog.changeLogStatus(compareLog, 'compare');
                return new Promise(((resolve, reject) =&gt; {
                    window.Message.confirm(util.format('fesMessages.tip'), message).then((index) =&gt; {
                        if (compareLog.status === 'compare') {
                            requsetLog.changeLogStatus(compareLog, oldStatus);
                        }
                        if (index === 0) {
                            resolve(action(url, data, option));
                        } else {
                            reject(new Error('不允许相同操作间隔过小'));
                        }
                    });
                }));
            }
            return action(url, data, option);
        }
        return action(url, data, option);
    }
    return action(url, data, option);
};
</code></pre><p>攻击者可以绕过正常流程，模拟发起多次请求，所以仅仅在前端页面做好预防重复请求工作是不够的。后台接口需要设计得更健壮，具有幂等性。</p>

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识