Laravel实现点击按钮后24小时内禁用编辑按钮与编辑权限

要实现用户点击编辑按钮后24小时内无法再次编辑该记录的功能，需要从数据库、后端逻辑、前端交互三个层面处理，确保前端禁用+后端验证双重保障，防止绕过前端限制。

1. 添加数据库锁定字段 #

首先给works表添加两个字段，记录锁定的用户和到期时间：

生成迁移文件 #

执行Artisan命令创建迁移：

php artisan make:migration add_lock_fields_to_works_table --table=works

编写迁移代码 #

在生成的迁移文件中添加字段：

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::table('works', function (Blueprint $table) {
            $table->unsignedBigInteger('locked_by_user_id')->nullable();
            $table->timestamp('locked_until')->nullable();
            
            // 可选：添加外键关联users表
            $table->foreign('locked_by_user_id')->references('id')->on('users')->onDelete('set null');
        });
    }

    public function down()
    {
        Schema::table('works', function (Blueprint $table) {
            $table->dropForeign(['locked_by_user_id']);
            $table->dropColumn(['locked_by_user_id', 'locked_until']);
        });
    }
};

执行迁移 #

php artisan migrate

2. 更新Work模型 #

在app/Models/Work.php中添加可填充字段：

protected $fillable = [
    // 原有字段（如start_from、end_to等）
    'locked_by_user_id',
    'locked_until',
];

3. 后端路由与锁定逻辑 #

添加路由 #

在routes/web.php中添加锁定接口路由：

use App\Http\Controllers\WorkController;

Route::post('/works/{work}/lock', [WorkController::class, 'lockEdit'])->name('works.lock');

编写锁定控制器方法 #

在WorkController.php中实现锁定逻辑：

use App\Models\Work;
use Carbon\Carbon;
use Illuminate\Http\Request;

public function lockEdit(Work $work)
{
    // 验证用户编辑权限
    if (!auth()->user()->can('edit_work')) {
        return response()->json(['message' => '无编辑权限'], 403);
    }

    // 检查当前用户是否已锁定该记录且未过期
    if ($work->locked_by_user_id === auth()->id() && Carbon::now()->lt($work->locked_until)) {
        return response()->json(['message' => '该记录24小时内无法再次编辑'], 403);
    }

    // 设置24小时锁定
    $work->update([
        'locked_by_user_id' => auth()->id(),
        'locked_until' => Carbon::now()->addHours(24)
    ]);

    return response()->json(['message' => '锁定成功']);
}

编辑请求后端验证 #

在编辑提交的update方法中添加锁定校验，防止绕过前端：

public function update(Request $request, Work $work)
{
    // 检查是否处于锁定状态
    if ($work->locked_by_user_id === auth()->id() && Carbon::now()->lt($work->locked_until)) {
        abort(403, '该记录24小时内无法再次编辑');
    }

    // 原有表单验证逻辑
    $validated = $request->validate([
        // 根据你的需求添加验证规则
        'start_from' => 'required|date',
        'end_to' => 'required|date|after:start_from',
        // 其他字段...
    ]);

    // 更新记录
    $work->update($validated);

    return redirect()->route('works.index')->with('success', '工作记录更新成功');
}

4. 修改Blade视图 #

调整编辑按钮 #

在循环中修改编辑按钮，根据锁定状态决定是否禁用：

@can('edit_work')
    @php
        $isLocked = $work->locked_by_user_id === auth()->id() && Carbon\Carbon::now()->lt($work->locked_until);
    @endphp
    <button type="button" 
            class="btn btn-info btn-sm {{ $isLocked ? 'opacity-50 cursor-not-allowed' : '' }}" 
            data-work-id="{{ $work->id }}"
            data-toggle="modal" 
            data-target="#edit{{ $work->id }}"
            title="{{ trans('Works_trans.Edit') }}"
            {{ $isLocked ? 'disabled' : '' }}>
        <i class="fa fa-edit"></i>
    </button>
@endcan

添加点击事件AJAX #

在视图底部或公共JS文件中添加按钮点击的AJAX逻辑，触发锁定：

<script>
$(document).on('click', '.btn-info[data-work-id]', function() {
    const workId = $(this).data('work-id');
    const $btn = $(this);

    $.ajax({
        url: `/works/${workId}/lock`,
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function() {
            // 锁定成功后禁用按钮
            $btn.prop('disabled', true).addClass('opacity-50 cursor-not-allowed');
        },
        error: function(xhr) {
            if (xhr.status === 403) {
                alert(xhr.responseJSON.message);
                $(`#edit${workId}`).modal('hide');
            }
        }
    });
});
</script>

说明 #

• 该方案仅限制点击编辑按钮的用户24小时内无法再次编辑，其他用户不受影响；如果需要限制所有用户，只需修改判断条件，去掉locked_by_user_id === auth()->id()的校验即可。
• 锁定到期后，无需手动解锁，前端和后端会自动判断时间恢复可编辑状态。

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