Updating the Authorization-header

So I have a single page application with authorization setup. When the app boots, it will check if the user is authenticated. If not, the user is send to the login page, if so, the app sets the Authorization header of the requests to the token saved in localStorage. This is working fine, but when I want to login and update the Authorization token, the update isn’t reflected and I have to manually refresh the page to make the request with the token.

As you can see here, I set the token correctly: https://github.com/petervmeijgaard/jwt-example/blob/next/resources/frontend/src/app/store/modules/auth/mutations.js#L24

And even when I do a console.log(Vue.echo.options.auth.headers.Authorization) before I subscribe to a private channel, I get the correct token returned. However, when I check the request send to the REST-server, the Authorization header isn’t set.

The console.log ouput:

The request headers:

[kubacode]

@petervmeijgaard I think I’ve figured it out. The Authorization header isn’t sent by Echo, its sent by Pusher. Setting the Authorization header in Echo only sets the header when the Pusher instance is constructed.

To set the Authorization header on the fly, you need to set the header on the Pusher object:

Echo.connector.pusher.config.auth.headers['Authorization'] = 'Bearer token';

I’m using the vue-auth plugin, so I’m able to add the header by overriding the _setHeaders function. You should also be able to set the header via a vue-resource interceptor.

[rgreer4]

Setting the pusher config directly did not work for me (and I’m not using vue-resource) – but this solution worked: https://github.com/tlaverdure/laravel-echo-server/issues/129#issuecomment-284216291

In my case I’m, using vue-echo on top of Echo, but the config block should work directly in Echo as well. For example:

           Vue.use(VueEcho, {
                broadcaster: 'pusher',
                key:         PUSHER_KEY,
                auth:        {
                    headers: {
                        Authorization: 'Bearer ' + BEARER_TOKEN,
                    },
                },
            });

…and setting:

Broadcast::routes(['middleware' => ['auth:api']]);

…in BroadcastServiceProvider as well.