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

Question

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

我试图尽可能多地使用Laravel的现成功能，所以我正在使用Axios使用Vue.js从刀片模板调用这些路由。如果我在测试路由上禁用身份验证中间件，则可以使用它，但是当为路由启用身份验证中间件时，控制台上会出现401错误。

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

Answer 1

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

根据Laravel 文档：

您需要做的就是将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 发出请求，而无需显式传递访问令牌...

Answer 2

您可能需要使用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);
  });