2

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

如果您没有注意到那里，我正在尝试收听私人频道。

4

2 回答 2

3

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 令牌传递给axiosheader 。

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

希望回答。

于 2019-01-05T18:13:01.887 回答
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']]);

于 2019-01-06T10:47:52.140 回答