Ionic: no content / white screen using interceptors
I was able to use interceptors (AngularJs) in my Ionic app. Previous post .
So far it works fine in the browser using "ionic feed".
In the header header and content block ("ionic content"), the content is not loading using "ionic running android" (either mimicking on genymotion or on my own phone). See screenshot below.
I'm sure this comes from the interceptors I'm using, because before that the application worked on any platform. Also, as soon as I remove the interceptors, it works again. Here is the code.
Note that I am checking which url is being called, so I am not going into a circular dependency or checking a useless url, only calls to my api get 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 for that case
if(!config.url.includes('/oauth/v2/token') && config.url.includes('/api')){
// inject the 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 what might give this error? (By the way, the console doesn't show errors in the 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 does NOT exist OR will expires soon
if( isObjectEmpty(access_token) || Date.now() > (access_token.expires_at - (600*1000)) ){
// Create an 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 is logged
else{
// IF access_token does NOT exist OR will expires soon OR is anonymous
if( isObjectEmpty(access_token) || Date.now() > (access_token.expires_at - (600*1000)) || access_token.type == 'anonymous' ){
// Create an access_token with an 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;
}
};
})
source to share
Have you installed the whostelist root plugin ?
cordova plugin add cordova-plugin-whitelist
or if you want to keep a link to the config.xml file:
cordova plugin add cordova-plugin-whitelist --save
If you do not have that your device will not be able to access external resources.
You can find more information here .
UPDATE
I have checked your previous answer.
The idea behind the interceptor is to intercept calls to an external service, insert some actions into the pipeline.
I would change your 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 your access token to the previous request and re-submits.
rejection.config.headers['Authorization'] = 'Bearer ' + access_token;
return $injector.get('$http')(rejection.config);
}
// This is necessary to make a `responseError` interceptor a no-op.
return $q.reject(rejection);
}
}
}]);
If you look at the interceptor above it, it manages all external resource (REST api) requests and adds a bearer token to the authorization header if needed.
The response is not significantly affected as it is only available for logging.
responseError
is where you should intercept and check if your token has expired, get a new one, and resubmit the request.
We check if the user has permission to request:
if (rejection.status === 401) { ... }
Unless we request a new access token. I think your OauthService is doing this. If we have a new access token:
var access_token = OauthService.token();
we can, again, add an access token to the request header:
rejection.config.headers['Authorization'] = 'Bearer ' + access_token;
and resubmit the previous request:
return $injector.get('$http')(rejection.config);
If you want to learn more about interceptors, you can read these blogs .
source to share