Laravel 10 + Vue实现用户专属TODO任务列表的方法咨询

1. 给tasks表添加user_id字段 #

先创建迁移文件：

php artisan make:migration add_user_id_to_tasks_table --table=tasks

打开生成的迁移文件，修改up方法添加关联字段与外键约束：

public function up()
{
    Schema::table('tasks', function (Blueprint $table) {
        $table->foreignId('user_id')->constrained()->onDelete('cascade');
        // onDelete('cascade')表示删除用户时同步删除其所有任务，可根据需求调整为restrict/nullify
    });
}

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

运行迁移生效：

php artisan migrate

2. 配置模型关联与批量赋值 #

User模型（app/Models/User.php） #

添加与Task的一对多关联：

public function tasks()
{
    return $this->hasMany(Task::class);
}

Task模型（app/Models/Task.php） #

添加与User的多对一关联，并把user_id加入可批量赋值列表：

protected $fillable = ['title', 'description', 'completed', 'user_id']; // 保留原有字段，新增user_id

public function user()
{
    return $this->belongsTo(User::class);
}

3. 修改控制器逻辑，实现任务隔离 #

所有任务操作都绑定当前登录用户，避免越权：

获取用户专属任务列表 #

public function index()
{
    // 仅返回当前登录用户的任务，替代原有的Task::all()/Task::query()
    return auth()->user()->tasks()->latest()->get();
}

创建任务时自动填充user_id #

public function store(Request $request)
{
    $validated = $request->validate([
        'title' => 'required|string|max:255',
        'description' => 'nullable|string',
        'completed' => 'boolean'
        // 无需前端传user_id，后端自动赋值
    ]);

    // 通过用户关联创建任务，自动填充user_id字段
    $task = auth()->user()->tasks()->create($validated);

    return response()->json($task, 201);
}

更新/删除任务时校验归属权 #

// 更新任务
public function update(Request $request, $id)
{
    // 仅能找到当前用户名下的任务，不存在则返回404
    $task = auth()->user()->tasks()->findOrFail($id);

    $validated = $request->validate([
        'title' => 'sometimes|required|string|max:255',
        'description' => 'nullable|string',
        'completed' => 'boolean'
    ]);

    $task->update($validated);
    return response()->json($task);
}

// 删除任务
public function destroy($id)
{
    $task = auth()->user()->tasks()->findOrFail($id);
    $task->delete();

    return response()->json(['message' => '任务删除成功']);
}

4. 保护任务路由 #

确保所有任务接口仅对登录用户开放，在路由中添加auth中间件：

// routes/api.php 或 routes/web.php
Route::middleware('auth')->group(function () {
    Route::resource('tasks', TaskController::class);
    // 自定义路由也放到这个分组里
});

5. 前端Vue调整（无代码侵入） #

后端已完成任务隔离，前端无需额外传递user_id参数，只需保留原有请求逻辑即可。比如创建任务的axios请求：

async createTask() {
    try {
        const response = await axios.post('/api/tasks', {
            title: this.title,
            description: this.description,
            completed: this.completed
        });
        // 后续渲染逻辑不变
    } catch (error) {
        console.error(error);
    }
}

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