Preventing Duplicate Form Submissions with ThinkPHP6 and Vue3

In web application development, duplicate form submissions can cause data redundancy and other issues; this guide demonstrates a solution using Vue3 on the front end and ThinkPHP6 on the back end to prevent such problems.

1. Idea and Logic

1.1 Frontend Logic In Vue3, the submit button is bound with v-bind:disabled="submitting" and a click handler via v-on:submit.prevent="submitForm" . When the user clicks the button, the submitting flag is set to true , disabling the button until the request finishes.

1.2 Backend Logic ThinkPHP6 generates a unique token stored in the session and embedded in the form. When the form is submitted, the token is sent back; the server compares it with the session token and rejects the request if they differ, indicating a possible duplicate submission.

2. Code Implementation

2.1 Frontend Code

Below is a Vue3 component that implements the described logic:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="name" placeholder="请输入姓名" />
      <input type="email" v-model="email" placeholder="请输入邮箱" />
      <button :disabled="submitting" type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';
import Axios from 'axios';
export default {
  setup() {
    const name = ref('');
    const email = ref('');
    const submitting = ref(false);
    const submitForm = async () => {
      if (!submitting.value) {
        submitting.value = true;
        const response = await Axios.post('/submit-form', { name: name.value, email: email.value });
        if (response.data.success) {
          alert('提交成功！');
        } else {
          alert('提交失败，请重试！');
        }
        name.value = '';
        email.value = '';
        submitting.value = false;
      }
    };
    return { name, email, submitting, submitForm };
  }
};
</script>

The component defines three reactive variables: name , email , and submitting . The button is disabled while submitting is true, preventing multiple clicks.

2.2 Backend Code

The following ThinkPHP6 controller method validates the token and processes the form data:

public function submitForm(Request $request)
{
    $postData = $request->post();
    // Verify token consistency
    if ($postData['_token'] !== session('_token')) {
        return json(['success' => false, 'message' => '重复提交，请重试！']);
    }
    // Save form data (example using Eloquent model)
    $result = Form::create($postData);
    if ($result) {
        return json(['success' => true]);
    } else {
        return json(['success' => false, 'message' => '提交失败，请重试！']);
    }
}

The method checks the submitted _token against the session token, saves the data if the token matches, and returns a JSON response indicating success or failure.

2.3 Token Generation and Verification Middleware

A middleware generates a unique token, stores it in the session, and adds it to the response header:

namespace app\middleware;

use think\facade\Session;
use Closure;

class TokenMiddleware
{
    public function handle($request, Closure $next)
    {
        $token = uniqid();
        Session::set('_token', $token);
        $response = $next($request);
        $response->header('X-CSRF-Token', $token);
        return $response;
    }
}

This ensures each form submission carries a unique token that the back end can verify.

3. Conclusion

By combining Vue3’s button‑disabling technique with ThinkPHP6’s token validation, developers can effectively prevent duplicate form submissions, protecting data integrity and improving user experience.