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

Posted 2023-02-22

【中文标题】带有 Vue 和 Laravel API 的推送器无法正常工作

【英文标题】：Pusher with Vue and Laravel API not working

【发布时间】：2019-05-31 21:53:44

【问题描述】：

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

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

【参考方案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"]')
        
    
 );

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

希望得到答案。

【讨论】：

感谢您的回答，正如我已经说过的，我已经尝试了所有可能的方法，包括 csrf 令牌，并且我也尝试过使用 laravel-echo，但我得到了相同的响应。我唯一没有尝试过的是第二步。但是你说不推荐。您确定使用它很重要吗？

@roliroli 不，你不说。你刚刚说“我已经用谷歌搜索了几个小时”，并且在你的代码中，你没有传递任何 CSRF 令牌，所以我猜你不知道这一点，然后我的回答就是基于此。

@roliroli 无论如何，如果您说您已经尝试了解决方案 1 和 3，但仍然无法正常工作，我猜您的设置不正确。如果您提供更多代码（或复制链接）会更清楚。

是的，我没有说我拥有一切可能，但我确实做到了。你的意思是我没有正确的设置？你说的是后端？因为 BE 成功触发了事件。

【参考方案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']]);

【讨论】：

哦，很好。我只是意识到你没有使用 Laravel Passport。我之前只是猜到你使用 Laravel Passport，所以你不需要传递 auth 标头。很高兴您找到了答案。

我只是想谢谢你，你拯救了我的一天，它非常有用，顺便说一下你可以使用 laravel echo，有了它，它就完美了。

很高兴看到您发现它很有帮助。我知道您可以使用 laravel echo，但团队不想使用包。