laravel - 使用 Vue 和 Laravel API 的 Pusher 无法正常工作

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 错误:“由于不活动而过期。请刷新并重试。”

如果您没有注意到，我正在尝试收听私有(private) channel 。

Answer 1

419 表示您未通过 CSRF token 验证。要解决这个问题，有一些方法。

1. 您应该将 CSRF token 传递给 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 token传递到axios header .

   // 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;
   }
   

希望得到答案。