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:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
this.allowed = false;will be called until the API call completes, allowing you to send more spam during this time. Set it tofalseimmediately after validatingif(this.allowed).if (this.allowed) { this.allowed = false; // Then do the call }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; }) ....