2017-06-21 106 views
1

我是Vuejs 2的新手,目前使用vue-resource從服務器檢索數據。但是,爲了從服務器檢索數據,我需要同時在請求頭中傳遞一個令牌。vue-resource沒有在請求標頭中傳遞令牌

所以問題是,我無法檢索數據,因爲令牌沒有傳遞到請求頭,使用vue-resource。

這裏是使用VUE資源的攔截器(在令牌傳遞)的方法來攔截GET請求:

test() { 
    this.$http.interceptors.push((request) => { 
    var accessToken = window.localStorage.getItem('access_token') 
    request.headers.set('x-access-token', accessToken) 
    return request 
    }) 
    this.$http.get(staffUrl) 
    .then(response => { 
    console.log(response) 
    }, (response) => { 
    console.log(response) 
    }) 
} 

的文檔VUE資源,HTTP:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

當我嘗試獲取數據,我最終出現錯誤403(禁止),並在開發工具中檢查請求標頭後,我也無法在請求標頭中找到標記。

請告訴我我錯了,因爲我真的是新來的,所以我感謝任何幫助!謝謝!

回答

1

使用$ http在組件內設置攔截器不起作用,或者至少它不會在我的測試中。如果您在test方法中推送後立即檢查/ log this.$http.interceptors,則會注意到攔截器未添加。

如果您在之前添加了攔截器,那麼您將實例化您的Vue,但是攔截器會被正確添加並且該報頭將被添加到請求中。

Vue.http.interceptors.push((request, next) => { 
    var accessToken = "xyxyxyx" 
    request.headers.set('x-access-token', accessToken) 
    next() 
}) 

new Vue({...}) 

這是我使用的test code

另外請注意,你應該總是調用下一個傳遞給攔截器的方法。

+0

嗨!謝謝你的幫助!在閱讀你的解釋之後,我能夠做到這一點。我不知道這是否是一個好主意,但是在實例化Vue之前,我在main.js中放入了'Vue.http.interceptors',然後它工作:-) – mary

相關問題