Question

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

但现在我正在构建一个基于Web的应用程序版本。我想使用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 auth发送帖子请求时，后者可以在axsios中使用。

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

感谢

Answer 1

Laravel有一个很好的API身份验证包Passport ，所以配置完成后，它会为require创建路由并返回令牌。要求http://{domain}/oauth/token。

当用户尝试登录时，Vue必须发送带有axios传递用户数据的发布请求。如果用户有权访问，则返回令牌。

要保护您的路线，您可以使用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请求标头中传递令牌。幸运的是，Passport已经为你做了这件事。

希望它有所帮助。

Laravel如何使用axios和vue将数据发布到受保护的路由

1 个答案: