Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ajax/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Ajax Vue.js-resource:带api密钥的http请求(Asana)_Ajax_Http Headers_Vue.js - Fatal编程技术网

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

Ajax Vue.js-resource:带api密钥的http请求(Asana),ajax,http-headers,vue.js,Ajax,Http Headers,Vue.js,我正在尝试使用vue resource()从Asana api中提取一些项目,vue resource()是一个vue.js附加组件,它使ajax调用变得简单。我正在使用api密钥访问Asana,但我不知道如何使用vue资源在请求头中传递密钥 在jQuery中,可以使用beforeSend: $.ajax ({ type: "GET", url: "https://app.asana.com/api/1.0/projects?opt_fields=name,no

我正在尝试使用vue resource()从Asana api中提取一些项目,vue resource()是一个vue.js附加组件,它使ajax调用变得简单。我正在使用api密钥访问Asana,但我不知道如何使用vue资源在请求头中传递密钥

在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是使用btoa()转换的Asana api键+':'

无需进行身份验证,只要在ready函数中发出一个简单的请求,Vue实例就可以了:

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)
我意识到我不够聪明,因为我无法理解文档中的语法,但是任何和所有的帮助都将不胜感激


有人吗?

也许我遗漏了一些细节,但是您不能使用
选项
参数来调用
$get
来指定标题吗?从文档中:

方法

获取(url、[数据]、[成功]、[选项])

[……]

选择权

[……]

headers-Object-要作为HTTP请求头发送的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"
         }
     }
);

您还可以为所有调用配置身份验证令牌,如下所示:

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

请参见

谢谢您的回复!您可能是对的,但我不太清楚如何正确地传递标题作为选项。你能写一个例子吗?