Laravel Echo + VueJS 广播/认证问题

Question

Laravel Echo + VueJS 广播/认证问题

phplaravelvue.jspusherpusher-js

3

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

这是我的Laravel Echo监听器的照片image link

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

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

在控制台/网络选项卡中的错误信息显示为路由[login]未定义。

这是控制台/网络中的一张图片https://istack.dev59.com/fnAGp.webp

我所做的事情：

-在config/app.php中取消注释App\Providers\BroadcastServiceProvider::class

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

-使用Echo.private('channel-name')而不是Echo.channel('channel-name')来监听私有频道

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

-在我的channels.php中添加一个频道（可能是私有频道）（这里有一张照片）

-在我的主要blade中添加csrf令牌元标记

当触发事件时，在pusher服务器上收到事件，这里是一个成功触发事件的图片。

所以问题在于当我监听私有频道时会出现错误，但监听公共频道时一切正常，我不太确定如何解决这个问题。

- Jonas

请问您能否展示一下您的routes/channels.php文件？另外，您是否在基础布局页面中添加了CSRF令牌元标记字段？ - Md. Miraj Khan

@Md.MirajKhan，请在帖子中查看照片。 - Jonas

您是否使用API身份验证登录？ - Md. Miraj Khan

@Md.MirajKhan 我使用Laravel Passport进行API身份验证，该身份验证使用了auth api中间件。 - Jonas

那么，您必须通过Pusher路由传递您的API令牌。 - Md. Miraj Khan

@Md.MirajKhan，你具体指的是什么和在哪里？ - Jonas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Md. Miraj Khan · Accepted Answer

您需要像下面这样在pusher请求中传递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/26
Laravel Echo未使用身份验证标头