带有 Vue 和 Laravel API 的推送器无法正常工作

Question

我正在使用 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 错误消息：“由于不活动而过期。请刷新并重试。”

如果你没有注意到我正在尝试收听私人频道。

Answer 1

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. 在 auth 广播路由上禁用 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;
   }
   

希望得到答案。

Answer 2

我找到了解决方案，希望对其他人有所帮助：

在前端：

  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']]);