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

Posted 2023-02-22

【中文标题】如何使用 Axios 使用经过身份验证的 API

【英文标题】：How to consume an authenticated API with Axios

【发布时间】：2020-07-10 22:44:41

【问题描述】：

我正在尝试使用 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

【问题讨论】：

你在 Laravel 有什么认证方式？你使用 JWT 吗？

我使用 laravel 护照身份验证，只是按照文档进行操作，所以我不确定。我知道我在使用邮递员进行测试时使用不记名令牌是否有帮助？

首先，你使用的是什么版本的 Laravel？其次，您使用文档中的哪些各种流程来验证您的用户，即您是使用密码授权还是“使用 javascript 使用您的 API”方法，或者其他不同的方法。如果您能更详细地解释您所经历的步骤，那肯定会有所帮助。

您好，抱歉信息不足。我正在使用 Laravel 5.8.35。关于护照，我正在使用此文档laravel.com/docs/5.8/passport 并遵循安装前端快速启动和部署步骤。

【参考方案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,
],

【参考方案2】：

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

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

'use Laravel\Passport\HasApiTokens;'

然后在类中，添加

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

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

'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 访问数据。

【参考方案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`;

【讨论】：

我已经尝试过了，但不幸的是它仍然不想工作，所以我不知道该怎么办了

【参考方案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))

【讨论】：

我已经尝试过了，但是，当我签入网络选项卡时，我找不到授权标头。我对包含 laravel_token 和 laravel_session 的 Cookie 标头也有一点困惑，是否有可能与此有关？这也只能通过http工作，也许不能在本地工作吗？再次感谢

上面的解决方案是我使用 JWT 并将令牌存储在 cookie 中以供将来授权。您可以在 Application 选项卡中查看所有 cookie、会话存储和本地存储数据。使用 Network 选项卡检查从服务器发送的响应。

不幸的是，这个解决方案似乎不适合我，我什至不明白为什么它不起作用

看看这是否可行***.com/questions/39436509/laravel-passport-scopes/…

【参考方案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';

【讨论】：

我可以确认。我的 app.blade 有 csrf 令牌元标记，而 bootstrap.js 确实包含 axios 代码。

你能不能也检查一下auth token是否被设置并与请求头一起传递。

我该如何检查这个？我还是很喜欢 javascript

打开浏览器的Network 标签。然后使用XHR 过滤它。现在，当您重新加载浏览器时，您可以看到您发出的 http 请求。单击请求时，它将显示所有设置的标头。

您好，感谢您的帮助！所以是的，我可以看到一个 cookie，它是 laravel_token= 和一个不记名令牌，我可以看到 xsrf 令牌