Laravel用Axios提交评论遇Unauthorized，user.api_token为undefined

从你描述的情况来看，问题核心很明确：Vue实例里的user.api_token是undefined，导致Axios请求没带上有效认证令牌，后端因此返回“未授权”错误。下面一步步帮你解决：

1. 确保后端正确传递用户的api_token到前端 #

你代码里的user: {!! Auth::check...是Laravel Blade模板的写法，首先得保证已登录用户的api_token被完整注入到Vue的user对象中。

修改user的赋值代码，确保输出包含api_token的完整用户对象：

user: {!! Auth::check() ? Auth::user()->toJson() : '{}' !!}

注意：如果你的User模型没有api_token字段，需要先给users表添加这个字段。可以通过迁移实现：

Schema::table('users', function (Blueprint $table) {
    $table->string('api_token', 80)->unique()->nullable()->default(null);
});

执行迁移后，新注册用户会自动生成api_token，老用户可以手动在数据库赋值或通过命令生成。

2. 手动补充api_token（如果自动传递失败） #

如果上面的方式还是拿不到api_token，可以单独把api_token传递到前端：

data: {
  comments: {},
  commentBox: '',
  post: {!! $post->toJson() !!},
  user: {
    api_token: "{!! Auth::check() ? Auth::user()->api_token : '' !!}"
  }
}

这样能直接确保user对象里有api_token字段，即使不需要其他用户信息。

3. 在Axios请求中带上认证令牌 #

拿到有效api_token后，必须通过Authorization请求头传递给后端，有两种方式可选：

方式一：单个请求设置headers #

在postComment()方法里，给Axios请求添加headers参数：

postComment() {
  console.log(this.user.api_token); // 现在应该能输出有效的token了
  axios.post('/api/comments', {
    post_id: this.post.id,
    body: this.commentBox
  }, {
    headers: {
      'Authorization': `Bearer ${this.user.api_token}`
    }
  })
  .then(response => {
    // 处理成功逻辑
    this.comments.push(response.data);
    this.commentBox = '';
  })
  .catch(error => {
    console.error(error);
  });
}

方式二：全局设置Axios默认headers #

如果应用里有很多需要认证的请求，可以在Vue实例的created钩子中全局设置，避免重复编写headers：

created() {
  if (this.user.api_token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${this.user.api_token}`;
  }
}

4. 后端路由和中间件检查 #

最后确认你的评论提交路由是否使用了auth:api中间件，比如在routes/api.php中：

Route::post('/comments', [CommentController::class, 'store'])->middleware('auth:api');

只有这样，后端才会验证请求头中的Bearer令牌是否有效。

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