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。与上面的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文档，并遵循了Installationm前端的快速入门和部署步骤。

第二次编辑：

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'，最后打开内核.php文件，添加此中间件：
'web' => [ // Other middleware... \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class, ],

Answer 2

请确认是否已在条目meta或csrf token文件中为html设置了blade的值{p>

<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

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

'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

我对同一问题所做的所有事情是：

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

'use Laravel\Passport\HasApiTokens;'

然后在类中添加

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

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

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

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

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

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

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

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

Answer 5

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

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

5 个答案: