2017-10-21 1 views
0

Hallo Ich möchte externe API verwenden, um alle aktuellen Wechselkurs zu sammeln. Meine Front basiert auf Token und ich speichere Token in localForage, das nichts als async localStorage ist.Fügen Sie eine Ausnahme hinzufügen Standard-Header in angularJS

//this execute after every page refresh 
$localForage.getItem('authorization') 
    .then(function(authData) { 
     if(authData) { 
      $scope.authentication.isAuth = true; 
      $http.defaults.headers.common.Authorization = 'Bearer ' + authData.token; 
      //set authentication variable to true and add token to every request after page refresh 
     } 
    }, function(){ 
      console.log("error with getting authorization localForage after refresh"); 
     } 
    ); 


//this execute after custom event emitted after success login response 
$rootScope.$on('localForageUpdated', function(event){ 
    $localForage.getItem('authorization') 
     .then(function(authData) { 
      if(authData) { 
       $http.defaults.headers.common.Authorization = 'Bearer ' + authData.token; 
       $scope.authentication.isAuth = true; 
       //set authentication variable to true and add token to every request after page refresh 
      } else { 
       $scope.authentication.isAuth = false; 
      } 
     }, function(){ 
       console.log("error with getting authorization localForage on event"); 
      } 
     ); 
}); 

Also diese im Grunde Header mit Token vor jeder Back-End-Anfrage hinzufügen.

Leider wenn ich versuche, alle aktuellen Währungskurse von externen API Download-I-Fehler folgt:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

, die an der Tat fällig ich Header mit meinem Token hinzugefügt. Kann ich bei der Einstellung $http.defaults.headers.common.Authorization = 'Bearer ' + authData.token; irgendwie eine Ausnahme hinzufügen?

+0

Sie können einen HTTP-Interceptor schreiben und den Auth-Header mit if-else setzen (d. H. Basierend auf einer benutzerdefinierten Logik) – harishr

Antwort

1

Hier ist meine Lösung, die Sie verwenden können, um Sie zu inspirieren.

Ich erstelle au Interceptor, um die Berechtigung hinzuzufügen. Bei dieser Überwachung können Sie Ihre Ausnahmebasis auf Ihre Bedürfnisse abstimmen. In meinem Fall basiere ich sie auf der URL.

angular.module('yourAppName').factory('authInterceptor', function ($q, $window) { 
    return { 
     request: function (config) { 
      config.headers = config.headers || {}; 

      if ($window.localStorage.token 
        && $window.localStorage.token !== undefined 
        && $window.localStorage.token !== 'undefined') { 
       if(config.url.startsWith("xyz")){ 
        delete config.headers.Authorization; 
       } else { 
        config.headers.Authorization = 'Bearer ' + $window.localStorage.token; 
       } 
      } 
      return config; 
     }, 
     response: function (response) { 
      return response || $q.when(response); 
     }, 
     // optional method 
     responseError: function (response) { 
      return $q.reject(response); 
     } 
    }; 
}); 

angular.module('rmsApp').config(function ($httpProvider) { 
    $httpProvider.interceptors.push('authInterceptor'); 
}); 
Verwandte Themen