Laravel 如何 post 使用 axios 和 vue 将数据传输到受保护的路由

Question

到目前为止，我只使用 Laravel 应用程序作为移动应用程序的后端 API。用户登录并获得一个令牌，然后将其存储在设备上，然后设备在对我的后端的每个请求中使用该基本 http 令牌 API。

但现在我正在构建我的应用程序的基于网络的版本。我想使用 axios 和 vue 在我的页面中发送 POST 更新，但我不确定我应该怎么做，因为我的路由受 auth 保护。

我应该这样做吗？:

<your-component :auth_user="{{auth()->user()->api_token}}"></your-component>

或者简单地创建一个元数据：

<meta name="token" id="token" value="{{ auth()->check() ? auth()->user()->api_token : null }}">

通过这种方式，我的组件可以获取我的用户 api_token，当我使用基本的 http 身份验证发送 post 请求时，稍后可以在 axsios 中使用它。

或者使用 axios 与受保护 API 对话的常用方法是什么？

谢谢

Answer 1

Laravel 有一个很好的 API 身份验证包，名为 Passport ，因此在配置后，它会为 require 和 return 令牌创建路由。要请求它 http://{domain}/oauth/token.

当用户尝试登录时，Vue 必须发送一个 post 请求，其中 axios 传递用户数据。如果用户有访问权限，则令牌是 returned.

要保护您的路线，您可以使用 middleware('auth:api')。 Passport 使用此中间件来验证令牌。

即：

<script>
  userData = {
    ...
  },
  axios.post('http://{domain}/oauth/token', userData) {
    .then(function (response) {
      console.log(response.access_token)
      ... redirect to dashboard or something else
    }
  }
  ...
  </script>

如您所知，必须在每个客户端请求中传递令牌，一种方法是在 HTTP 请求中传递令牌 header。幸运的是，Passport 已经为您完成了这项工作。

希望对您有所帮助。

Laravel 如何 post 使用 axios 和 vue 将数据传输到受保护的路由

Laravel how to post data to a protected route using axios and vue

laravel

vue.js

axios