如何使用 Axios 使用经过身份验证的 API

Question

我正在尝试使用 Vue 和 Laravel 构建应用程序。我目前在 Laravel 中使用护照身份验证进行用户身份验证。但是，当我尝试使用 axio 从 vue 组件发出 post 请求时，我得到 401 unauthorized，即使我当前已登录。

下面是一些示例代码：

1.从vue组件获取请求

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

2。 Laravel 路线

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

3。与上述获取请求关联的日历控制器

    /**
     * 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

请确认您是否在条目 html 或 blade 文件

中为 csrf token 设置了 meta 值

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

bootstrap.js 文件中 axios 的 header 也像这样

window.axios = require('axios');

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

Answer 2

如果您在 cookie 中存储身份验证令牌，那么您可以执行以下操作

let token = cookie.get("token");
//send Authorization token with each request
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
axios
     .get("/api/calendar")
     .then(resp => console.log(resp.data))
     .catch(err => console.log(err))

Answer 3

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

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

https://laravel.com/docs/5.8/passport#consuming-your-api-with-javascript

此外，您不需要 bootstrap 或日历组件中的这些行。 Passport 将使用仅限 http 的 cookie 为您解决这个问题。

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

Answer 4

我对你的项目做了一些修改，这里是 github 存储库 https://github.com/AzafoCossa/ProFix，希望它有用。

打开 AuthServiceProvider.php 文件，将 Passport::routes() 添加到 boot() 函数并打开 auth.php 文件，将 'api' 守卫从 'driver'=>'token' 更新为 'driver'=>'passport' 最后打开 Kernel.php 文件，添加这个中间件：

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

Answer 5

我对同一个问题所做的是：

在User.php，加在头上，

'use Laravel\Passport\HasApiTokens;'

然后在class里面，添加

'HasApiTokens' to the line 'use Notifiable, HasRoles, HasApiTokens;'

在config>auth.php中，将'driver'=>'token'改为'api'下的'driver'=>'passport'[=40] =].

'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
            'hash' => false,
        ],
    ],

将 CreateFreshApiToken 中间件添加到您的 app/Http/Kernel.php 文件中的 Web 中间件组：

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

没有别的。我的 axios 请求是：axios.get('api/cities');

如我所愿。只有组件可以访问数据。但是任何经过身份验证或未经身份验证的用户都不能通过直接 url.

访问数据

如何使用 Axios 使用经过身份验证的 API

How to consume an authenticated API with Axios

php

laravel

vue.js

axios

laravel-passport