convert Laravel signed route that pushes data to signed route with Vue component that pulls data

Question

I have a Laravel signed Url page, which allows me to share a page with guest users. All this works fine, I can send data to the Blade template.

But, I want to switch to a SPA, where Vue components pull the data. How do I let Vue (or actually: the Laravel API) know "it is ok" to request data from the protected Laravel API?

E.g. http://myapp.com/share/place/25?signature=... shows the details for place #25 and no login is required. Laravel sends $data to the view. When using Vue components, I would like to let each component pull the relevant data.

I could still let Laravel push the data, but I would like the component to pull the data.
Is this possible?

that is what I meant with "I could still let Laravel push the data" (to the Vue component). In SPA routing is done by Vue, so it is the component that will decide what data to get. — wivku
I see. Well then it would have to be done by AJAX, which I'm sure you're aware. So what you're really asking is how to authorise a request via JS to a signed URL? — GBWDev
Correct. How to create "myapp.com/share/place/25" shareable link by using Vue routing instead of Laravel signed url. — wivku

GBWDev GBWDev · Accepted Answer · 2020-01-27T12:19:12

I have a Laravel signed Url page, which allows me to share a page with guest users.

Here is what I propose

As per docs, there is a method to verify signed URLs.

You could give the user the URL and when the user loads the page (component mounted) send an AJAX request with the signature and return all the necessary place data from the controller so that you can inject it into the page with 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');

If the signature supplied to the AJAX request is incorrect or expired, the PHP method will return a 401 status response, so be sure to add extra code to handle that in your vue code.

convert Laravel signed route that pushes data to signed route with Vue component that pulls data

1 Answers