Vue.js-resource: http request with api key (Asana)

Question

I'm trying to extract some projects from the Asana api with vue-resource (https://github.com/vuejs/vue-resource), a Vue.js add-on that makes ajax calls simple. I'm using an api key to access Asana, but I can't figure out how to pass the key in the request header using vue-resource.

In jQuery this works, using beforeSend:

 $.ajax ({
        type: "GET",
        url: "https://app.asana.com/api/1.0/projects?opt_fields=name,notes",
        dataType: 'json',
        beforeSend: function(xhr) { 
            xhr.setRequestHeader("Authorization", "Basic " + "XXXXXX"); 
        },
        success: function (data){
            // console.log(data);
        }
    });

Where XXXXXX is the Asana api key + ':' converted with btoa(). https://asana.com/developers/documentation/getting-started/authentication

Without needing to authenticate, the Vue instance should be fine with a simple request in the ready function:

new Vue({    
    el: '#asana_projects',    
    data: {
        projects : []
    },    
    ready: function() {
        this.$http.get('https://app.asana.com/api/1.0/projects?opt_fields=name,notes', function (projects) {
            this.$set('projects', projects); // $set sets a property even if it's not declared
        });
    },    
    methods: {
        //  functions here
    }
});

This, of course, returns a 401 (Unauthorized), since there is no api key in there.

On the vue-resource github page there is also a beforeSend option for the request, but even though it is described right there I can't seem to figure out the correct syntax for it.

I have tried

    this.$http.get( ... ).beforeSend( ... ); 
    // -> "beforeSend is not a function", and

    this.$http.get(URL, {beforeSend: function (req, opt) { ... }, function(projects) { //set... });
    // -> runs the function but req and opt are undefined (of course)

I realize I'm being less than clever as I fail to understand a syntax that is right there in the documentation, but any and all help would be much appreciated!

Any takers?

David K. Hess · Accepted Answer · 2015-08-05 12:55:55Z

5

Perhaps I'm missing some subtlety but can't you use the options parameter to the $get call to specify the header? From the docs: https://github.com/vuejs/vue-resource#methods

Methods

Vue.http.get(url, [data], [success], [options])

[...]

Options

[...]

headers - Object - Headers object to be sent as HTTP request headers

[...]

So for instance:

this.$http.get(
    'https://app.asana.com/api/1.0/projects?opt_fields=name,notes',
     function (projects) {
        this.$set('projects', projects); // $set sets a property even if it's not declared
     },
     {
         headers: {
            "Authorization": "Basic " + "XXXXXX"
         }
     }
);

edited Aug 5, 2015 at 12:55

answered Aug 4, 2015 at 17:13

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dippner Over a year ago

Thanks for your reply! You may very well be right, but I'm not quite clear on how to correctly pass the header as an option. Could you please write an example?

Jannie Theunissen · Accepted Answer · 2016-05-27 08:11:44Z

1

You can also configure the auth token for all calls like this:

Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

See the docs

answered May 27, 2016 at 8:11

Jannie Theunissen

30.3k21 gold badges110 silver badges136 bronze badges

Collectives™ on Stack Overflow

Vue.js-resource: http request with api key (Asana)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related