Vueは2つの有効なトークンを1つだけ要求します

Question

vueおよびvueリソースを使用して起動します。 バックエンドで私はlaravelを使用しています。ここでjwtトークンを処理します。 要求ごとにトークンがリフレッシュされます。私は以下のようにVUEのリソースで行に2つの要求を送信する場合 ：：今のところ、これは1つの状況を除いて、素晴らしい作品

//first request 
Vue.http.get('/api/runs').then((response) => { 

     return response.json(); 
    }, (response) => { 
     console.log(response); 
     this.$set('error', {'status' : response.status, 'error': response.statusText}); 
    }); 
//second request 
Vue.http.get('/api/meta').then((response) => { 

     return response.json(); 
    }, (response) => { 
     console.log(response); 
     this.$set('error', {'status' : response.status, 'error': response.statusText}); 
    }); 

のみ最初の要求が有効なトークンを持っています。 私はインターセプタを経由して、トークンを設定しています：

Vue.http.interceptors.push((request, next) => { 
    request.headers['Authorization'] = Auth.getAuthHeader(); 
    request.emulateJSON = true; 
    next(function(response) { 
     if(response.headers['Authorization']) { 
      var token = response.headers['Authorization']; 
      localStorage.setItem('jwt-token', token); 
     } 
    }); 
}); 

この問題が発生し、両方の要求が新しいJWTトークンを設定することができますインターセプタ前に平行に発射されているため。 私の質問は、最初のものが完全に終了するまで、またはインターセプタを強制的に強制的に待機させるまで、2番目の要求を強制する方法です。

Answer 1

私はあなたがそれを持っているのと同じように、インターセプタでこれを達成できるとは思いません。約束は非同期です。 2番目のリクエストを最初のリクエストの成功コールバックに入れる必要があります。しかし、私はある時点で不必要に乱雑になり、あなたの呼び出しから非同期の能力を取り去ることができると思います。

私は、トークンをリフレッシュするためのバックエンドAPI（Laravel/Passport）でエンドポイントを作成することをお勧めします。新しいaccess_tokenを回収するには、refresh_tokenをエンドポイントに送信する必要があります。アクセストークンの長時間の使用を許可します（あまりにも頻繁にリフレッシュせず、アプリの処理速度を遅くすることはありません）。これは典型的なOAuth2フローです。ここにあなたの認証ヘッダを追加し、迎撃が無効なトークン応答を取得する際にも、自動的にトークンを更新します単一インターセプター（VueJS 2.0と最新のVue-リソース1.0.3）です：

Vue.http.interceptors.push((request, next) => { 
    const token = "get your token from localStorage or Vuex here" 
    const hasAuthHeader = request.headers.has('Authorization') 

    if (token && !hasAuthHeader) { 
    request.headers.set('Authorization', 'Bearer ' + token) 
    } 

    next((response) => { 
    if (response.status === 401 && response.data.error === 'invalid_token') { 
     // Create this function below to get the new token and store 
     // it in localStorage and then retries the original request. 
     return refreshToken(request) 
    } 
    }) 
}) 

私はrefreshToken(request)機能を残しておきますあなたが書くことができますが、うまくいけばあなたはここでそのアイデアを得るでしょう。あなたは調整を行い、JWTを使うことができます。また、VueJS 2.0 Example Project、または具体的にはAuth.jsファイルを見て、リフレッシュトークン機能をどのように実装したかを確認できます。