Laravel 5.4、Passport 和 Angular 7 不能一起玩

Laravel 5.4, Passport, and Angular 7 not playing nicely together

我有一个使用 Laravel 5.4 构建的网站,我正在努力更新 UI。我想使用 Angular 7 朝着单页应用程序的方向前进。但是我一直在尝试向我的 API 端点发出请求,我一直收到 401 错误。我已按照此处的说明进行操作:https://laravel.com/docs/5.4/passport#consuming-your-api-with-javascript 将元标记添加到页面,进行了额外的设置,并开始使用 Angulars HTTP 库,就像这样

this.httpOptions = {
    headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': this.meta.getTag('name=csrf-token').content
    })
};

this.http.get('api/v1/people', this.httpOptions).subscribe((data: any) => {console.log(data); });

但是我继续收到 401 错误。另外这里还有 Kernel.php

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,       
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class
    ],

    'api' => [
        'throttle:60,1',
        'auth:api'
    ],
];

和Routes.php

Route::group(['middleware' => 'auth:api'], function(){
   Route::group(['prefix' => 'api/v1'], function () {
     Route::get('people', 'personController@apiIndex');
     Route::get('person/{id}', 'personController@apiGetPerson');
     Route::post('contactevent', 'contactEventsController@apiAddContactEvent');
   });
});

如有任何意见,我们将不胜感激。

看来我误解了所提供的一些文档。当您想要使用您在网站上提供的 api 到 javascript 时,您不必将您的路由包含在 auth:api 组中以验证调用。 Laravel 而是将 cookie 与您的请求一起传递,此外不需要 CSRF,除非它是 POST 请求。我的解决方案是将我的路由移动到 auth 中间件组,如下所示:

Route::group(['middleware' => 'auth'], function () {
  Route::get('api/v1/people', 'personController@apiIndex');
}

然后像这样重写我的 Angular HTTP 请求:

this.httpOptions = {
    headers: new HttpHeaders({
        'Content-Type':  'application/json'
    })
};

this.http.get('api/v1/people', this.httpOptions).subscribe((data: any) => {console.log(data); });

一切都按预期进行。