V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lovecy
V2EX  ›  问与答

一般的后台站,如何防止用户重复点击/误点击

  •  
  •   lovecy · 2020-07-10 14:13:01 +08:00 · 1723 次点击
    这是一个创建于 681 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如某些删除修改的功能,前端 WEB 页面,防止用户双击,或者点击了 A 功能,还未响应时又点击 B 功能

    • 仅为前端简单限制,并非后端
    • 主要是想有一种思路,比如加遮罩,或者请求时禁用所有可点击元素?

    昨天发生一个问题就是有个用户同时点击了两个操作按钮,导致数据错乱了,现在想优化一下,以上列举的两种思路感觉都不是很优雅?

    14 条回复    2020-07-11 03:30:53 +08:00
    myEzekiel
        1
    myEzekiel  
       2020-07-10 14:50:21 +08:00   ❤️ 1
    点击,弹出遮罩层,提示加载中或第一次点击完把按钮设为不可点击,直到成功或失败,再变为可点击
    lovecy
        2
    lovecy  
    OP
       2020-07-10 15:15:40 +08:00
    @myEzekiel 请问下有比较好的封装么,自己写的很丑。
    w292614191
        3
    w292614191  
       2020-07-10 15:53:38 +08:00   ❤️ 1
    ajaxSetup({
    beforeSend:function(){
    loading...
    }

    });
    wafm
        4
    wafm  
       2020-07-10 15:54:27 +08:00
    来个个位数算法确认
    toma77
        5
    toma77  
       2020-07-10 16:28:47 +08:00   ❤️ 1
    const [loading,setLoading] = useState(false);

    const fetchFunc =async ()=>{
    setLoading(true);
    const data = fetch('http://xxx')
    .then(function(response) {
    setLoading(false);
    return response.json();
    })
    };

    <button onClick={fetchFunc}} disabled={loading}>A</botton>
    <button onClick={fetchFunc}} disabled={loading}>B</botton>
    niubee1
        6
    niubee1  
       2020-07-10 16:37:34 +08:00
    讲一个笑话,2005 年的时候,电信还有个业务叫互联星空,其中有个活动是可以在一个页面点一个按钮,用电话话费兑换 Q 币。结果这个页面在做的时候没有做防护,结果某位仁波切兄狂点了几千次(因为那个时候网速慢,页面卡住了)结果被扣了好几千话费,兑换了好几千 Q 币,电话也欠费停机了。于是去营业厅理论,但是营业厅没法做业务回退,仁波切兄就纠集了一大群仁波切,把营业厅给砸了。
    从此以后,任何用 JS submit 的操作,都会第一时间 disable 按钮。页面刷新的时候也会加上 nonce,提交后后端也会验证 nonce 。不然就会回想起仁波切的恐惧......
    easonHHH
        7
    easonHHH  
       2020-07-10 16:44:25 +08:00
    节流?但是魔改页面可破,后端也是要做限制的
    lovecy
        8
    lovecy  
    OP
       2020-07-10 16:44:52 +08:00
    @niubee1 哈哈哈,我这边维护的都是老旧项目了,很多质量都很差。不过话说仁波切是惹不起的意思么- -
    @wafm 啥是 个位数算法确认 [懵逼.jpg]
    @toma77 感谢,这个封装思路 GET 了
    9tao
        9
    9tao  
       2020-07-10 17:02:07 +08:00
    debounce
    lovecy
        10
    lovecy  
    OP
       2020-07-10 18:06:08 +08:00
    @easonHHH 是的,后端有做限制的,就是前段也限制一下,想找个简单快捷的方式
    @9tao 谢谢,我去了解一下
    towave
        11
    towave  
       2020-07-10 18:30:11 +08:00 via Android
    什么都不用的话,加个标志变量就行了
    wafm
        12
    wafm  
       2020-07-10 18:57:32 +08:00
    @lovecy 曾经做过一个项目,跟你的需求类似,客户要求每做一个操作前必须确认,最大限度防止误操作

    我这边给下边的人出了个主意,每次操作前弹出一个全局 modal,随机生成一道和不超过 2 位数的个位数加法的算法,这样的话就不会有问题,操作人每次进行操作需要做一道非常简单的算术题,就不会误点或者错操作
    Jooooooooo
        13
    Jooooooooo  
       2020-07-10 19:37:51 +08:00
    前端做限制拦住大部分

    恶意发请求的后端再用锁
    billccn
        14
    billccn  
       2020-07-11 03:30:53 +08:00
    我曾经干过 AJAX 发出以后用 document.write 把整个页面换成只剩下"loading...",这时候你的 JS 代码还在跑,但是用户已经不可能再触发任何元素了。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3587 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:23 · PVG 09:23 · LAX 18:23 · JFK 21:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.