angularjs - Ionic : no content / white screen using interceptors -


i managed use interceptors (angularjs ) in ionic application. previous post .

while working in browser using "ionic serve".

there no content loaded in header title , content block ( "ion-content" ) using "ionic run android" (either emulating on genymotion or on own phone). see screenshot below.

no content / white screen using interceptors

i'm pretty sure comes interceptors i'm using, because before that, app working on platforms. also, remove interceptors working again. here code.

note i'm checking url called don't go circular dependency or checking useless url, calls api go through.

app.config(function($httpprovider){      $httpprovider.interceptors.push(['$location', '$injector', '$q', function($location, $injector, $q){          return {              'request' : function(config){                  // intercept request                  // carefull includes might not work while emulating                 // use instead indexof case                 if(!config.url.includes('/oauth/v2/token') && config.url.includes('/api')){                      // inject service manually                     var oauthservice = $injector.get('oauthservice');                      var access_token = oauthservice.token();                     config.url = config.url+'?access_token='+access_token.key;                  }                  return config;             }          }      }]);  }); 

any ideas give error? (by way console showing no errors on browser).

update :

oauthservice.js :

app.factory('oauthservice', function($http, $localstorage) {  return {     token : function(){          // store actual token         access_token = $localstorage.getobject('access_token');         // store actual identity         identity_token = $localstorage.getobject('identity_token');          // if no user logged         if(isobjectempty(identity_token)){              // if access_token not exist or expires             if( isobjectempty(access_token) || date.now() > (access_token.expires_at - (600*1000)) ){                  // create anonymous access_token                 return $http                     .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&grant_type=client_credentials')                     .then(function (response) {                          $localstorage.setobject('access_token', {                             key: response.data.access_token,                             type: 'anonymous',                             expires_at: date.now()+(response.data.expires_in*1000)                         });                          return response.data.access_token;                      });             }          }         // if user logged         else{              // if access_token not exist or expires or anonymous             if( isobjectempty(access_token) || date.now() > (access_token.expires_at - (600*1000)) || access_token.type == 'anonymous' ){                 // create access_token identity                 return $http                     .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&api_key='+identity_token+'&grant_type=http://oauth2.dev/grants/api_key')                     .then(function (response) {                          $localstorage.setobject('access_token', {                             key: response.data.access_token,                             type: 'identity',                             expires_at: date.now()+(response.data.expires_in*1000)                         });                          return response.data.access_token;                      });             }          }          return access_token.key;      } };  }) 

did install cordova whitelist plugin ?

cordova plugin add cordova-plugin-whitelist 

or if want save reference config.xml file:

cordova plugin add cordova-plugin-whitelist --save 

if don't have device won't able access external resources.

you can find more info here.

update:

i've checked previous answer.
idea of interceptor intercept calls external service insert action in pipeline.

i change interceptor:

$httpprovider.interceptors.push(['$location', '$injector', '$q', '$localstorage', function($location, $injector, $q, $localstorage){      return {          'request' : function(config) {             config.headers = config.headers || {};              access_token = $localstorage.getobject('access_token');              if (access_token) {                 config.headers.authorization = 'bearer ' + access_token;             }         }          'response' : function(response){              if (response.status === 401) {                 logger.debug("response 401");             }             return response || $q.when(response);         }          'responseerror' : function(rejection){              if (rejection.status === 401) {                 var oauthservice = $injector.get('oauthservice');                 var access_token = oauthservice.token();                  if (access_token === null)                 {                     return $q.reject(rejection);                 }                  // append access token previous request , re-submits.                 rejection.config.headers['authorization'] = 'bearer ' + access_token;                 return $injector.get('$http')(rejection.config);             }              // necessary make `responseerror` interceptor no-op.              return $q.reject(rejection);         }     } }]); 

if @ interceptor above manages requests external resource (rest api) , appends bearer token authorization header if needed.

the response not there logging purposes.

responseerror place should intercept , check if token expired, fetch new 1 , resubmit request.

we check if user not authorized request:

if (rejection.status === 401) { ... } 

if not request new access token. guess oauthservice that. if have new access token:

var access_token = oauthservice.token(); 

we can, again, append access token request header:

rejection.config.headers['authorization'] = 'bearer ' + access_token; 

and resubmit previous request:

return $injector.get('$http')(rejection.config); 

if want find out more interceptors can read these blogs.


Comments