Error Defining Headers-Authorization in Data Return in Axios

Asked

Viewed 239 times

0

I’m trying to set the headers - Authorization after a request via Xios, this request returns the token that is generated on the server, in line 7 of the code below assign the token that is returned to insert into the headers in Authorization and after that redirect to the system home page on line 8. However the Authorization headers is not being created.

Someone would know to signal me where the bug is and how to create headers - Authorization with the token that is successfully returned in the rest of the . then, line 5?

1          data = {email: email, password: password};   
2          url = '/auth/token';     
3               
4          axios.post(url, simpleQueryString.stringify(data))       
5            .then(function(response) {         
6                if (response.status == 201) {          
7                    window.axios.defaults.headers.common['Authorization'] = response.data.token;           
8                    redirectPageHome(response.data['base_url']);
9                }          
10           })         
11           .catch(function(error) {           
12              console.log(error.response.data.error);         
13           })
http-headers axios requisition

  • Friend, your application is stateless? is a SPA? Post the code of this function "redirectPageHome" and an example of this "Sponse.data['base_url']". If your application is stateless, you must store the token locally (Storage location) and when loading the application perform the configuration.

  • It is stateless is not SPA, the "redirectPageHome" function performs only this -> window.location.replace(base_url+"/"). The base_url is brought in the answer of the Axios request.

1 answer

2


Friend, I believe window.location.replace may be generating a new request. If you’re using Chrome, check the developer tools tab Network.

I believe the right thing in this case is to store locally (local Storage):

data = {email: email, password: password};   
url = '/auth/token';     

axios.post(url, simpleQueryString.stringify(data))       
    .then(function(response) {         
        if (response.status == 201) {
            localStorage.setItem('token',response.data.token);
            redirectPageHome(response.data['base_url']);
        }          
    })         
    .catch(function(error) {           
        console.log(error.response.data.error);         
    })

And then just after the inclusion of Xios, verify the existence of the token and configure the header. Example:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    // exemplos retirados da documentacao do axios
    // https://github.com/axios/axios

    // opcao 1 - configurar globalmente
    var token = localStorage.getItem('token');
    if (token) {
        window.axios.defaults.headers.common['Authorization'] = token; 
    }

    // opcao 2 - configurar a cada requisicao
    axios.interceptors.request.use(function (config) {
        var token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = token;
        }
        return config;
    });
</script>

I hope it helps.

Browser other questions tagged http-headers axios requisition

You are not signed in. Login or sign up in order to post.