vue-resourceがリクエストヘッダにトークンを渡していません

Question

現在、vue-resourceを使ってサーバからデータを取得しているVuejs 2は初めてです。しかし、サーバーからデータを取得するためには、要求ヘッダーに同時にトークンを渡す必要があります。

問題は、vue-resourceを使用してトークンがリクエストヘッダーに渡されないため、データを取得できません。ここで

は、GETリクエストを傍受する（トークンに渡す）VUE-リソースのインターセプターを使用する方法である：VUE-リソースの

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

ドキュメント、HTTP：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

Iデータを取得しようとすると、エラー403（禁止）で終了し、devツールのリクエストヘッダを確認した後、リクエストヘッダにトークンが見つかりませんでした。

私は間違ってどこに行ったのか教えてください。私は本当にこれが新しいので、何か助けてくれてありがとう！ありがとうございました！

Answer 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が使用されています。

また、インターセプタに渡される次のメソッドを呼び出す必要があります。