使用拉取数据的 Vue 组件将推送数据的 Laravel 签名路由转换为签名路由答案

【问题标题】：convert Laravel signed route that pushes data to signed route with Vue component that pulls data使用拉取数据的 Vue 组件将推送数据的 Laravel 签名路由转换为签名路由
【发布时间】：2020-05-12 16:46:16
【问题描述】：

我有一个Laravel signed Url 页面，它允许我与来宾用户共享一个页面。这一切都很好，我可以将数据发送到 Blade 模板。

但是，我想切换到 SPA，Vue 组件在其中提取数据。我如何让 Vue（或者实际上：Laravel API）知道“可以”从受保护的 Laravel API 请求数据？

例如http://myapp.com/share/place/25?signature=... 显示地点 #25 的详细信息，无需登录。 Laravel 将 $data 发送到视图。在使用Vue组件时，我想让每个组件拉取相关数据。

我仍然可以让 Laravel 推送数据，但我希望组件能够拉取数据。
这可能吗？

【问题讨论】：

您可以将刀片中的数据回显到脚本标签中吗？
这就是我所说的“我仍然可以让 Laravel 推送数据”（到 Vue 组件）的意思。在 SPA 中路由是由 Vue 完成的，所以它是组件来决定获取哪些数据。
我明白了。那么它必须由 AJAX 来完成，我相信你知道这一点。那么您真正要问的是如何通过 JS 将请求授权到已签名的 URL？
正确。如何使用 Vue 路由而不是 Laravel 签名的 url 创建“myapp.com/share/place/25”可共享链接。
等一下是不是临时网址？

标签： laravel vue.js vue-component

【解决方案1】：

我有一个 Laravel 签名的 Url 页面，允许我与来宾用户共享页面。

这是我的建议

根据文档，有一种验证签名 URL 的方法。

您可以为用户提供 URL，当用户加载页面（已安装组件）时发送带有签名的 AJAX 请求并从控制器返回所有必要的位置数据，以便您可以使用 Vue.js 将其注入页面。

Axios.get(`/share/place/25?signature=${your_signed_url_signature}`)
.then(response=>{
  const data = response.data; //your "place" data
  //..do something with it
})

PHP

use Illuminate\Http\Request;

Route::get('/share/place/{id}', function (Request $request) {
  if (! $request->hasValidSignature()) {
      // not authorised
      abort(401);
  }
  //Gather all necessary place data and return it

  return response()->json([
    'data' => $data 
  ])

})->name('unsubscribe');

如果提供给 AJAX 请求的签名不正确或已过期，PHP 方法将返回 401 状态响应，因此请务必在您的 vue 代码中添加额外的代码来处理。

【讨论】：