преобразовать Laravel подписанный маршрут, который передает данные в подписанный маршрут с помощью Vue компонента, который извлекает данные - PullRequest
0 голосов
/ 27 января 2020

У меня есть Laravel подписанный URL-адрес , который позволяет мне поделиться страницей с гостевыми пользователями. Все это отлично работает, я могу отправить данные в шаблон Blade.

Но я хочу перейти к SPA, где Vue компоненты извлекают данные. Как я могу сообщить Vue (или на самом деле: Laravel API), что «все в порядке» запрашивать данные из защищенного Laravel API?

Например, http://myapp.com/share/place/25?signature= ... показывает детали для места № 25 и вход в систему не требуется. Laravel отправляет $ data в представление. При использовании Vue компонентов я бы хотел, чтобы каждый компонент извлекал соответствующие данные.

Я все еще мог бы разрешить Laravel pu sh данные, но я бы хотел, чтобы компонент извлекал данные.
Возможно ли это?

1 Ответ

0 голосов
/ 27 января 2020

У меня есть 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 коде.

...