如何在 Laravel 中验证 API 路由的 Vue.js / Axios 请求答案

【问题标题】：How to authenticate Vue.js / Axios request of an API route in Laravel如何在 Laravel 中验证 API 路由的 Vue.js / Axios 请求
【发布时间】：2018-10-16 00:41:28
【问题描述】：

我在 Laravel 5.6 中。我构建了所有 API 路由并正确响应来自我的 REST 客户端 (Paw) 的请求。我正在尝试构建一个简单的前端来访问这些路由。

我正在尝试尽可能多地使用 Laravel 的开箱即用功能，因此我使用 Axios 从使用 Vue.js 的刀片模板调用这些路由。如果我在测试路由上禁用 auth 中间件，它会起作用，但是当为路由启用 auth 中间件时，我会在控制台上收到 401 错误。

问题似乎很明显......我的/api 路由上的auth:api 守卫希望在标头中看到一个oauth 令牌，但是当我使用网页登录时，它会进行会话身份验证。我认为有一种简单的方法可以解决这个问题，而不必在 Web 前端欺骗 oauth 令牌请求，对吧？我是否需要通过 Axios 以某种方式在我的请求中传递会话令牌？如果是这样，我是否还需要更改我的 api 路由文件中的 auth:api 保护？

【问题讨论】：

默认auth:api中间件要求每个用户在数据库中有一个字段api_token，你加了一个吗？
这不是真正的问题。 Passport 在user 表中创建了一个名为remember_token 的字段，并且我的API 路由都与我的REST 客户端的OAuth 一起正常工作。问题是我正在尝试构建的 Vue.js / Axios 前端使用相同的 API 路由。
啊，所以你在前端有令牌，但不确定如何将它附加到请求中？
我现在好像坏了一些东西。我现在只能从 Axios 收到undefined，即使我禁用了所有身份验证。值得注意的是，我在控制台中看到 /js/bootstrap.js.map 出现 404 错误。对该问题的搜索会带来一百万次点击，但没有有效的答案。
好的，我修复了破坏整个脚本的问题。我仍然在控制台中收到关于 /js/bootstrap.js.map 的 404 错误，但这似乎并不重要，因为当我在路由上禁用身份验证时，我得到了想要的结果。所以我回到了我第一次发布这个问题时的状态，但仍然没有有效的解决方案。

标签： laravel authentication vue.js axios

【解决方案1】：

要首先使用auth:api，您需要在用户表中使用api_token

Schema::table('users', function ($table) {
    $table->string('api_token', 80)->after('password')
                        ->unique()
                        ->nullable()
                        ->default(null);
});

您也可以创建一个用户进行测试，如下所示

User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
        'api_token' => Str::random(60),
    ]);

在您的布局中使用@yield('content')之前的以下内容

<script>
     window.Laravel = <?php echo json_encode(['api_token' => (Auth::user())->api_token]); ?>
</script>

现在您可以在您的 vue js 中使用 window.laravel.api_token 在标头中使用它

举个例子

var methods = new Vue({
    el: '#tabs_lists',
    data: {
        config: {
            headers: {
              Authorization: 'Bearer ' + window.Laravel.api_token,
              Accept: 'application/json'
            }
           },
        data: []
    },
    methods: {
        test: function (link) {
            axios.get(link, this.config)
               .then(response => (this.data = response.data)).catch(function (error) {
                // handle error
                console.log(error);
              });
        }
    }
}
  )

【讨论】：

【解决方案2】：

我解决了！我有点尴尬，因为答案实际上在 Laravel 文档中，但我会说我在这里发布问题之前尝试过这个并且它不起作用。也许当时有其他东西坏了。

根据Laravel docs：

您只需将CreateFreshApiToken 中间件添加到您的 web 中间件组在您的 app/Http/Kernel.php 文件中：
'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],
此 Passport 中间件会将 laravel_token cookie 附加到您的传出响应。此 cookie 包含一个加密的 JWT Passport 将用于验证来自 JavaScript 的 API 请求应用。现在，您可以向应用程序的 API 发出请求无需显式传递访问令牌...

【讨论】：

除此之外，我还必须在我的AppServiceProviders boot 方法中调用Passport::withoutCookieSerialization()。更多信息可以找到in these Laravel upgrade notes
这对我有帮助 pineco.de/laravel-api-auth-with-tokens

【解决方案3】：

您可能希望使用Larvel Passport 或JWT 身份验证机制来获取Authorization 令牌。

查看您如何使用 axios，添加一个请求拦截器，以便在您成功验证后将访问令牌附加到每个请求。一个简单的例子：

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // assume your access token is stored in local storage 
    // (it should really be somewhere more secure but I digress for simplicity)
    let token = localStorage.getItem('access_token')
    if (token) {
       config.headers['Authorization'] = `Bearer ${token}`
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

【讨论】：