Headers

[Barrykilby]

Hi Janis,

Thanks for the great package! I'm having a bit of an issue though when submitting the form I need a Bearer token header to authenticate the request. I'm currently adding this via a axios interceptor but after some testing, this section of code below seems to not respect any headers already set. I'm not sure of the best way to address this as I would just do a pull request for you?

headers: this.multipart ? { 'Content-Type': 'multipart/form-data' } : {}, Barry

[janiskelemen]

Hi Barry,

I'm glad you like it! Fair point, I guess I have to merge all existing headers with the one I add dynamically. I'll hack this in and push a fix soon.

Janis

[Barrykilby]

Thanks Janis

[janiskelemen]

No worries! I just tried it using the axios interceptor and it worked for me. Can you make sure that your interceptor looks like this:

import axios from 'axios'

axios.interceptors.request.use( function ( config ) {
    // Do something before request is sent
    config.headers.common[ 'Authorization' ] = 'your-token'
    return config
} )

[Barrykilby]

I suspect I may need to debug things further as I have router and vueX in play an my interceptor is in the root and your package is in a subcomponant

[janiskelemen]

All right, let me know if you need further help.

[Barrykilby]

Hi Janis,

Just a quick update on this, I added your code above specifically for the interceptor as mine was a little different (axios.defaults.headers.common). I also had it add another custom header just to make sure it was that code running.

I was still seeing the issue so I added a button that just calls a method that then tries a post request via axios. Placing the button here gives me the same results as what I see when pressing your submit button. <fvl-submit>Validate</fvl-submit> <button @click="doThis">Do This</button> </fvl-form> But placing it here it sends the extra headers.

<fvl-submit>Validate</fvl-submit> </fvl-form> <button @click="doThis">Do This</button> I'm going to keep diggiing but I thought I'd just update on my progress!

[janiskelemen]

Hi Barry, if you like me to take a look, feel free to set up your use case in https://codesandbox.io and I'm happy to fiddle around with it.

[Barrykilby]

Hi Janis,

I have spent the last few hours trying various things, the only thing that seemed to make it work was when I added an interceptor directly into fvlform.vue and ran build to produce a new dist copy but that's obviously not a great idea...

I have tried to add a stripped back version to codesandbox but I don't seem to be able to get it to run, i'm not sure if its just i'm not familiar with codesandbox but you should get the idea from https://codesandbox.io/s/yj5r898ynx what I was trying to do!

Barry

[Barrykilby]

Hi Janis,

As best I can tell this is an issue with your version of Axios being seen as a different instance to my version, I have tried everything I can think of (I'm no expert at Vue but an experienced dev overall and stubborn!) - I have been over this and anything else I can think of like trying the beta version of Axios with fixes in and I can't get it to use my headers at all. If I set my headers in your code or even pull your src directory into my tree and have it included and built all is well but as a package there seems to just be no luck :(

[janiskelemen]

Hi Barry, I can confirm that it is an issue with different axios versions. I will add an additional header property to the global config so you can set your bearer token there. I try to push an update for this tomorrow.

[Barrykilby]

Thanks Janis

[janiskelemen]

I have added a headers property which you can use on the form component directly or you can set the headers globally in the global config.

[Barrykilby]

Thanks for the update Janis, I'll be able to take a look at this soon and let you know!