AngularJs：スローされた不正なリクエストエラーリフレッシュトークンがすべてのリクエストを再開した場合、すべての$ httpリクエストを保持する方法

Question

私はangularjsでシングルページアプリケーションを開発しました。私は、リフレッシュトークンメカニズムを実装しました。リフレッシュトークンは30分ごとにリフレッシュすると仮定します。私は、インターセプタのresponseErrorにリフレッシュトークンを処理しようとしています。私は401の不正なエラーを返す場合、リクエストを保持しようとしています。 401エラーを返してからトークンをリフレッシュし、新しいトークンですべてのリクエストを再開すると、すべてのリクエストを保持するメカニズムはありますか？

が、それはここでのサンプルコードでは、要するに

$provide.factory('httpTokenInterceptor', function ($q, $injector, $cookies) { 
return { 
    // On request sending 
    request: function (config) { 
     config.headers = config.headers || {}; 

     // get this data from $cookies 
     var globals = $cookies.getObject('globals') || {}; 
     //console.log(globals); 
     if (globals.authData) 
      config.headers.Authorization = 'Bearer ' + globals.authData.access_token; 

     return config; 
    }, 

    // On response failure 
    responseError: function (rejection) { 
     console.log('AuthTokenHttpInterceptor responseError'); 
     console.log(rejection); 
     if (rejection.status === 401) { 
      //hold current and all pending request 
      var aService = $injector.get('authenticationService'); 
      aService.getRefreshToken().then(function(response) { 

       //need to resume all the request here 

       deferred.resolve(response); 
      }); 
      return deferred.promise; 
     } 
     return $q.reject(rejection); 
    } 
}; 
}); 

Answer 1

で、リフレッシュトークンを処理するための正しい方法です、あなたはそのようなあなたのHTTP呼び出しのいずれかを保持する必要はありません。

のいずれかのHTTPコールが既に失敗した後に、解決策が実行され、トークンがリフレッシュされます。また、明確にするために、HTMLテンプレートのようなリソースを取得しているHTTP呼び出しでも、コードにAuthorizationヘッダーが追加されています。これをやりたくない場合は、同様に制限する必要があります。

1つの解決方法については、linkをチェックしてください。 JWTトークンの処理には特定のライブラリを使用しませんが、HTTP呼び出しを行う必要がある場合はいつでも、この実装を使用するためにこの実装を包むラッパーを作成する必要があります。

私の提案（およびJWTトークンを扱う際の個人的な好み）は、angular-jwtライブラリを使用しています。セットアップは本当に簡単ですし、hereをチェックアウトすることができます。

auth0のような複雑なライブラリがあります。これは他の多くのものを行うことができ、angular-jwtライブラリと組み合わせて使用​​できます。このlinkをチェックして、HTTP呼び出しの前とページの更新時の両方でトークンの更新を処理する方法を確認してください。

これが役に立ちます。

Answer 2

AngularJSインターセプタを使用して要求を保持し、再開できます。上記の例で

authInterceptor.$inject = ['$q', '$rootScope']; 
function authInterceptor($q, $rootScope) { 
     return { 
      request: function(config) { 
       var deferred = $q.defer(); 

       $rootScope.$watch('continue', function(value) { 
        if(value === true) 
         deferred.resolve(config); 
       }); 

       return deferred.promise; 
      } 
     }; 
    } 

$rootScope.continueがtrueなるまで要求の全てを保持します。さもなければ、彼らは永遠に待つでしょう。