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

Question

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

下面是一些示例代码：

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

我对您的项目进行了一些更改，这里是 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 2

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

1. 在 User.php 中，添加到头部，

'use Laravel\Passport\HasApiTokens;'

然后在类中，添加

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

1. 在 config>auth.php 中，将 'driver'=>'token' 更改为 'driver'=>'passport' under 'api' under 'guard'。

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

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

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

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

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

它按我的意愿工作。只有组件可以访问数据。但是没有经过身份验证或未经身份验证的用户可以通过直接 url 访问数据。

Answer 3

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

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

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

此外，您不应该需要引导程序或日历组件中的这些行。 Passport 将使用仅限 http 的 cookie 为您处理这些问题。

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

Answer 4

如果您将身份验证令牌存储在 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 5

请确认您是否在条目html 或blade 文件中为csrf token 设置了meta 值

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

还有bootstrap.js 文件中axios 的标头，如下所示

window.axios = require('axios');

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