Pusher с Vue и Laravel API не работает - PullRequest
Новая
       34

Pusher с Vue и Laravel API не работает

0 голосов
/ 05 января 2019

Я пользуюсь Vue SPA и Laravel. Я часами гуглял по нему и много чего пробовал, но не могу найти способ заставить его работать.

В index.html У меня 

<meta name="csrf-token" content="{{ csrf_token() }}">

Это мой метод подписки: 

subscribe() {
  let pusher = new Pusher('key', {
    cluster: 'ap1',
    encrypted: true,
    authEndpoint: 'https://api_url/broadcasting/auth',
    auth: {
      headers: {
        'X-CSRF-Token': document.head.querySelector(
          'meta[name="csrf-token"]'
        )
      }
    }
  })
  let channel = pusher.subscribe(
    'private-user.login.' + this.user.company_id
  )
  channel.bind('UserLogin', data => {
    console.log(data)
  })
}

Я получаю сообщение об ошибке 419, говорящее: « истек из-за неактивности. Пожалуйста, обновите и попробуйте снова. »

Если вы не заметили, я пытаюсь прослушать частный канал.

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Я нашел решение, надеюсь, оно может помочь другим:

В передней части: 

  let pusher = new Pusher('app_key', {
    cluster: 'ap1',
    encrypted: true,
    authEndpoint: 'https://api_url/broadcasting/auth',
    auth: {
      headers: {
        Authorization: 'Bearer ' + token_here
      }
    }
  })
  let channel = pusher.subscribe(
    'private-channel.' + this.user.id
  )
  channel.bind('event-name', data => {
    console.log(data)
  })

Как вы можете видеть выше, нет необходимости использовать токен csrf, вместо этого используйте токен jwt.

В серверной части перейдите на BroadcastServiceProvider и измените это:

Broadcast::routes(); до Broadcast::routes(['middleware' => ['auth:api']]);

0 голосов
/ 05 января 2019

419 означает, что вы не прошли проверку токена CSRF. Чтобы решить проблему, есть какой-то способ.

  1. Вы должны передать токен CSRF экземпляру Pusher. Вы можете следовать инструкции здесь https://pusher.com/docs/authenticating_users. Я приведу вам пример. 

    let pusher = new Pusher('app_key', {
    cluster: 'ap1',
    encrypted: true,
    authEndpoint: 'https://api_url/broadcasting/auth',
    auth: {
        headers: {
            // I assume you have meta named `csrf-token`.
            'X-CSRF-Token': document.head.querySelector('meta[name="csrf-token"]')
        }
    }
 });

  2. Отключить проверку CSRF на маршруте аутентификации. Но это не рекомендуется, поскольку здесь важна проверка CSRF.

    App \ Http \ Middleware \ VerifyCsrfToken 

    /**
 * The URIs that should be excluded from CSRF verification.
 *
 * @var array
 */
protected $except = [
    'broadcasting/auth'
];

  3. Используйте laravel-echo, это за сценой, используйте axios, вам просто нужно передать токен CSRF в заголовок axios. 

    // I assume you have meta named `csrf-token`.
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
}

надеюсь, что ответ.

...