web-dev-qa-db-ja.com

認証ヘッダーのvue-resourceインターセプター

Vuejsフロントアプリケーション（vue-cli webpackテンプレート）をセットアップして、Laravel API。

正しい認証トークンを提供することで、vue-resourceを使用してAPIから正常な応答を取得できます。次に例を示します。

_methods: {
    getUser () {
      this.$http.get('http://localhost:8000/api/user', 
      {
        headers: {
          'Authorization': 'Bearer eyJ0e.....etc',
          'Accept': 'application/json'
        }
      }).then((response) => {
        this.name = response.data.name
      });
    },
_

ただし、ユーザーの認証トークンが各リクエストに対して自動的に追加されるように、インターセプターを設定しようとしています。

Vue-resource readmeに基づいて、私は_main.js_でこれを試しています：

_Vue.use(VueResource)

Vue.http.interceptors.Push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})
_

コンポーネントに戻ると、次のようになりました。

_this.$http.get('http://localhost:8000/api/user').then((response) => {
    this.name = response.data.name
});
_

問題：

get自体にヘッダーを指定すると、成功した応答を受け取りますが、interceptorを介してヘッダーを渡すと、サーバーから_401 Unauthorized_を返します。インターセプターの使用中に正常に応答するようにこれを修正するにはどうすればよいですか？

編集： dev-toolsを使用して送信要求を表示すると、次の動作が見られます。

_$http.get_にヘッダーを指定してリクエストを作成するとき、OPTIONSリクエストに成功し、GETヘッダーにAuthenticationリクエストを指定して、GETリクエストに成功します。

ただし、ヘッダーを_$http.get_から直接削除してインターセプターに移動すると、GET要求のみを行い、GETにはAuthenticationヘッダーが含まれないため、_401 Unauthorized_として返されます。

vue.jsvue-resource
12
tam5

私の問題は、インターセプターでヘッダーを設定する構文であったことがわかりました。

次のようになります。

Vue.use(VueResource)

Vue.http.interceptors.Push((request, next) => {
  request.headers.set('Authorization', 'Bearer eyJ0e.....etc')
  request.headers.set('Accept', 'application/json')
  next()
})

私がこれをしている間：

Vue.use(VueResource)

Vue.http.interceptors.Push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})
31
tam5

このオプションを追加します。

Vue.http.options.credentials = true;

そして、グローバルな方法でインターセプターを使用します：

Vue.http.interceptors.Push(function(request, next) {

request.headers['Authorization'] = 'Basic abc' //Base64
request.headers['Accept'] = 'application/json'
next()

}）;

0
Satu