Vue.js-resource:带api密钥的http请求(Asana)

Question

我正在尝试使用vue-resource(https://github.com/vuejs/vue-resource)从Asana api中提取一些项目,这是一个使ajax调用变得简单的Vue.js附加组件.我正在使用api密钥访问Asana,但我无法弄清楚如何使用vue-resource在请求头中传递密钥.

在jQuery中,这可以使用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);
        }
    });

其中XXXXXX是Asana api键+':'用btoa()转换.https://asana.com/developers/documentation/getting-started/authentication

无需进行身份验证,Vue实例应该可以在ready函数中使用简单的请求:

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
    }
});

当然,这会返回401(未授权),因为那里没有api密钥.

在vue-resource github页面上,还有一个请求的beforeSend选项,但即使它在那里被描述,我似乎无法找出它的正确语法.

我试过了

    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)

我意识到自己并不聪明,因为我无法理解文档中的语法,但是任何和所有帮助都会非常感激!

任何接受者？

Answer 1

也许我错过了一些微妙但你不能使用options参数来$get调用指定标题？来自文档:https://github.com/vuejs/vue-resource#methods

方法

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

[...]

选项

[...]

headers - Object - 要作为HTTP请求标头发送的标头对象

[...]

例如:

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"
         }
     }
);