I'm working on a like/dislike system on Laravel/VueJS.
My system works, but I want to avoid spammers.
Like button:
<a v-on:click="like(10, $event)"> <i class="fas fa-heart"></i> </a>
10 is the post id, which is generated in laravel Blade...
This is how I try to avoid spammers:
const app = new Vue({ el: '#app', data() { return { allowed: true, }; }, methods: { like: function (id, event) { if (this.allowed) { axios.post('/posts/' + id + '/like', { post_id: id, }) .then((response) => { this.allowed = false; //Set allowed to false, to avoid spammers. ..... code which changes fa-heart, changes class names, texts etc .... // send notification to user Vue.toasted.show('Bla bla bla successfuly liked post', { duration: 2000, onComplete: (function () { this.allowed = true //After notification ended, user gets permission to like/dislike again. }) });
But something is missing here, or I'm doing something wrong. When I click on a similar icon very very quickly and check the requests, axios sends 3-4-5 requests (depending on how fast you click)
Only after 3-5 requests data.allowed
will become false
. Why? I want:
P粉7524794672024-02-27 10:11:57
this.allowed = false;
will be called until the API call completes, allowing you to send more spam during this time.
Set it to false
immediately after validating if(this.allowed)
.
if (this.allowed) { this.allowed = false; // Then do the call }
P粉4773692692024-02-27 09:15:48
like: function (id, event) { // first, check if the `like` can be sent to server if (!this.allowed) return; // remember that we are sending request, not allowed to `like` again this.allowed = false; var self = this; // you need this to remember real this axios.post('/posts/' + id + '/like', { post_id: id, }).then((response) => { ..... code .... // send notification to user Vue.toasted.show('Bla bla bla successfuly liked post', { duration: 2000, onComplete: function () { //After notification ended, user gets permission to like/dislike again. self.allowed = true; } ); }).catch(function() { // maybe you also need this catch, in case network error occurs self.allowed = true; }) ....