[Question] Pass headers in http actions

[jjcodes78]

I can do this?

[aarondfrancis]

You can't right now, but that would be a good addition. I'll see if I can add it in today or tomorrow!

Thanks for the question.

[devplayer0]

This would be great for authentication. For example my backend uses JWT for auth and reads the token from the HTTP Authorization header.

[stefanosandes]

+1

[aarondfrancis]

@jjsquad @jackos2500 @stefanosandes please take a look at the open PR https://github.com/aarondfrancis/vue-model/issues/3 and let me know if this would work for JWT and whatever else you had in mind.

[aarondfrancis]

You can see a description of the functionality in the README diff.

[devplayer0]

@aarondfrancis Looks good to me, I'm using JWT.

[jjcodes78]

Thanks @aarondfrancis ;)

[stefanosandes]

Great! Thanks @aarondfrancis! But how could I set the headers later, after Vue.use(...) . There may be cases where a token expires and we need to redefine it without reloading the page .

[aarondfrancis]

@stefanosandes In that case, it would be best to make headers a callback function.

Vue.use(require('vue-model'), {
    headers: function(action) {
        return {
            'Authorization': getTokenFromStorage()
        };
    }
});

I'm open to other suggestions, of course.

[devplayer0]

@stefanosandes According to the README in the PR you can also set the headers on a per-action basis, again with either a function or just a plain object.

[aarondfrancis]

@jackos2500 that's correct, but I'm not sure that would help @stefanosandes if the token changes after he defines the headers, either by general or action-specific definitions.

[stefanosandes]

@aarondfrancis callback makes perfect sense. Thank you! It was very excellent!

[aarondfrancis]

Great! I'll merge it in tonight.

[devplayer0]

@aarondfrancis But with a function in the action you can override the global headers option at the time the request is sent right? Like this:

Vue.models.register('video', {
     actions: {
         complete: {
             method: 'POST',
             route: '/{id}/complete',
             headers: function() {
                return {
                   "Authorization": getTokenFromStorage()
                };
             }
         }
     }
 });

[aarondfrancis]

@jackos2500 Yep, correct! You can use a function in the action definition or globally in the model registration. For each action, the action-specific definition will extend and override the global options.

Here's the logic that handles that: https://github.com/aarondfrancis/vue-model/pull/3/files#diff-96402e3967f40f890b345d1291b004b3R230