Dippner Dippner - 8 months ago 144
Ajax Question

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

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?


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


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




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


So for instance:

     function (projects) {
        this.$set('projects', projects); // $set sets a property even if it's not declared
         headers: {
            "Authorization": "Basic " + "XXXXXX"