Laravel Echo & Vue

In our SPA when the application is loaded the first thing we do is retrieve the authenticated user info with Vuex. These UserInfo contains the channel id which we use to join/register each user to his private channel and listen events.

The issue here is that until the Vuex dispatch is resolved which it's NOT in this component (I cannot use async await) the userInfo is undefined therefore when Laravel Echo tries to authenticate the channel I am getting 403 forbidden because I am sending 'user.undefined'.

How to do this properly? The only way I found is with watcher but other users reported that it's an "ugly way to resolve this". I am open for alternatives...

const userInfo = computed(() => store.getters['UserSettings/getUserInfo']);
onMounted(() => {
  echo.private('users.' + userInfo.channel_id).listen('.eventName', (e) => {
        //DO SOMETHING
      }).listen('.anotherEventName', (e) => {
        //DO SOMETHING
      });
})

Helmchen

4 years ago

Level 15

You could use Actions instead, which return a Promise. Then you could use then() or async/await to join the channel afterwards.

But to be honest, i don't see any problem using watchers for this. Watch has the advantage that you could also react to changes to the channel name and do the unsubscribe/subscribe again :) That may be a niche use case though.

gadreel

4 years ago

Level 4

@Helmchen Thank you for your reply. I have never used actions can you provide an example if it's not much of a trouble? Watchers was the only thing we would think of but on a StackOverflow post I read that watchers it's not the best approach. By experience, I should know better that there is no right or wrong when it comes to coding...

gadreel

4 years ago

Level 4

@Helmchen Wait, Actions you mean Vuex Actions? If this is what you mean, like I said in my first post unfortunately the store.dispatch is called inside the initial App.vue component that I have no control over to add async/wait.

Helmchen

4 years ago

Level 15

@gadreel i mean technically you can dispatch the action from wherever and how often you want. worste case your sending an additional request to the server, which may or may not be a big problem for you.

You could also just emit an event that auth is completed (which means the state "should" be available too) - something like that. And you still have the watcher, right :P

Please or to participate in this conversation.