Pusher с Vue и Laravel API не работает - PullRequest
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;
    }
    

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

...