Laravel/VueJS点赞系统如何用axios实现点赞按钮防重复点击，操作完成后恢复可点

问题原因 #

1. 你将allowed状态设为false的逻辑写在了axios.post的then回调中，axios是异步请求工具，从点击发起请求到服务端返回响应触发then回调存在时间差，这段时间内allowed始终为true，快速点击就会触发多次请求，直到第一次请求的then回调执行才会修改allowed状态。
2. 原代码中onComplete回调使用普通函数声明，内部的this指向toasted实例而非Vue实例，无法正确修改Vue实例上的allowed值，也是状态不生效的原因之一。

修复方案 #

调整like方法逻辑，点击后立刻锁死状态，再发起请求，不满足操作权限时直接抛出提示，完整代码如下：

const app = new Vue({
  el: '#app',
  data() {
    return {
      allowed: true,
    };
  },
  methods: {
    like: function (id, event) {
      // 权限校验不通过直接提示
      if (!this.allowed) {
        Vue.toasted.show('上一次操作通知未结束，暂不可重复点击', {
          duration: 1500
        });
        return;
      }
      // 校验通过立刻锁死状态，防止重复触发
      this.allowed = false;
      // 发起异步点赞请求
      axios.post('/posts/' + id + '/like', {  
        post_id: id,
      })
      .then((response) => {
        // 切换fa-heart状态、修改类名、更新计数等业务代码写在此处

        // 弹出操作成功通知
        Vue.toasted.show('点赞成功', {
          duration: 2000,
          // 使用箭头函数保证this指向Vue实例
          onComplete: () => {
            this.allowed = true;
          }
        });
      })
      .catch((error) => {
        // 异常场景也要解锁，避免请求失败后永远无法操作
        Vue.toasted.show('点赞失败，请稍后重试', {
          duration: 1500,
          onComplete: () => {
            this.allowed = true;
          }
        });
      })
    }
  }
})

后端加固建议 #

前端限制仅能防止普通用户误操作，无法抵御恶意刷接口的行为，建议后端额外增加两层校验：

• 同一用户对同一帖子1分钟内最多发起1次点赞/取消赞请求
• 每个用户对同一帖子仅能保留一条有效点赞/点踩记录，重复请求直接返回操作无效

内容的提问来源于stack exchange，提问作者Dewagg