Question

我正在使用Vue SPA和Laravel。我已经在Google上搜索了好几个小时，并尝试了很多方法，但找不到找到使之工作的方法。

在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令牌验证。要解决此问题，有一些方法。

您应该将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"]')
        }
    }
 });

在身份验证广播路由上禁用CSRF验证。但是，不建议这样做，因为此处的CSRF验证很重要。

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

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

具有Vue和Laravel API的Pusher无法正常运行

2 个答案: