Laravel Echo + VueJS 广播/认证问题

Posted 2023-02-22

【中文标题】Laravel Echo + VueJS 广播/认证问题

【英文标题】：Laravel Echo + VueJS broadcast/auth problem

【发布时间】：2020-03-06 18:49:25

【问题描述】：

我使用 Laravel Echo 和 pusher 作为我的服务器。它已经在公共频道上运行。

这是我的 laravel echo 监听器image link的照片

现在我的问题是当我使用 PrivateChannel 时，当我在私人频道中收听时会弹出此错误：

POST http://localhost:3000/broadcasting/auth500（内部服务器错误）

在控制台/网络选项卡中的错误中显示 Route [login] not defined。

这是控制台/网络内的图​​像https://i.stack.imgur.com/fnAGp.png

我做过的事情：

-config/app.php 中未注释的 App\Providers\BroadcastServiceProvider::class

-添加广播::routes(['middleware' => ['auth:api']]);在 BroadcastServiceProvider.php 中

-使用 Echo.private('channel-name') 代替 Echo.channel('channel-name') 来收听私人频道

-将 authEndpoint : 'http://localhost:3000/broadcasting/auth' 添加到 bootstrap.js（这是我的 Echo 选项所在的位置）

-在我的 channels.php (here is a photo) 中添加了一个频道（可能是私人频道）

-在我的主刀片中添加了 csrf 令牌元标记

在推送服务器中，它在被触发时接收事件，这里是 picture of the event successfully fired.

所以问题是当我收听私人频道时会弹出错误但收听公共频道时一切正常，而且我不太确定如何评估这个问题。

【问题讨论】：

能否请您显示您的 routes/channels.php 文件，并且您是否在基本布局页面中添加了 CSRF 令牌元标记字段？

@Md.MirajKhan 请查看帖子中的照片

您是否使用 API Auth 登录？

@Md.MirajKhan 我使用 Laravel Passport 进行 API 身份验证，它使用 auth api 中间件

所以你必须通过推送路由传递你的 api_toke。

【参考方案1】：

您必须通过如下所示的推送器请求传递 auth 标头。

window.Echo = new Echo(
    broadcaster: 'pusher',
    key: 'APP_KEY',
    authEndpoint: '/broadcasting/auth'
    auth: 
        headers: 
            'Authorization': 'Bearer your_api_Toke',
            'X-CSRF-Token': "CSRF_TOKEN"
         
      
    );

更多详情：

https://github.com/laravel/echo/issues/26Laravel Echo not using Auth Headers

【讨论】：

补充一下，如果在后端使用 Laravel API，在前端使用 Vue，您可能根本不想使用 CSRF_TOKEN。所以从前端的标题中删除它，然后在 laravel 上转到 app/Http/Middleware/VerifyCsrfToken.php 并将“广播/身份验证”添加到 $except[]。也可以这样做进行测试，直到您让其他一切正常工作为止。