Vue.js-resource：带有 api 键的 http 请求 (Asana)

Question

我正在尝试使用 vue-resource (https://github.com/vuejs/vue-resource) 从 Asana api 中提取一些项目，一个 Vue.js add-on 使 ajax 调用简单。我正在使用 api 密钥访问 Asana，但我不知道如何使用 vue-resource.

在请求 header 中传递密钥

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

这当然是 returns 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

也许我遗漏了一些微妙之处，但您不能使用 $get 调用的 options 参数来指定 header 吗？来自文档：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

[...]

例如：

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

Answer 2

您还可以像这样为所有调用配置身份验证令牌：

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

见the docs

Vue.js-resource：带有 api 键的 http 请求 (Asana)

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

ajax

http-headers

vue.js