如何使用Axios验证的API

Question

我正在尝试使用Vue和Laravel构建一个应用程序。我目前在Laravel中使用passport身份验证进行用户身份验证。但是，当我尝试使用axio从vue组件发出post请求时，即使我当前已登录，也会获得401未经授权的权限。

下面是一些示例代码：

1.从vue组件获取请求

    getEvents() {
      axios
        .get("/api/calendar")
        .then(resp => (this.events = resp.data.data))
        .catch(err => console.log(err.response.data));
    }

2.拉维路

Route::apiResource('/calendar', 'CalendarController')->middleware('auth:api');

3.与上述get请求关联的日历控制器

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return CalendarResource::collection(Calendar::all());
    }

我花了好几个小时研究这个问题，但我发现的一切都不起作用。因此，任何帮助都是非常诱人的。

编辑：

额外细节

我使用Laravel 5.8.35。

关于护照，我使用这个留档laravel.com/docs/5.8/passport，并遵循安装前端快速启动和部署步骤。

第二次编辑：

github上的完整代码

这是github上的完整项目，如果有帮助的话。https://github.com/CMHayden/akal.app/tree/feature/Calendar

Answer 1

尝试在此处添加正确的中间件以及其他建议

'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

https://laravel.com/docs/5.8/passport#consuming-使用javascript创建api

//send Authorization token with each request
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

Answer 2

请确认您是否已在条目html或blade文件中设置csrf令牌的meta值

<meta name="csrf-token" content="{{ csrf_token() }}">

还有axios在bootstrap.js文件中的头

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Answer 3

我对您的项目做了一些更改，下面是github存储库https://github.com/AzafoCossa/ProFix，希望它能起作用。

打开AuthServiceProvider。php文件，将Passport:：routes（）添加到boot（）函数并打开auth。php文件，从'driver'更新'api'防护=

'web' => [
   // Other middleware...
   \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],