angularjs - ionic : no content/white screen using interceptors

Question

我成功地在我的 Ionic 应用程序中使用了拦截器 (AngularJs)。 Previous post .

虽然它在使用“ionic serve”的浏览器中运行良好。

没有使用“ionic run android”(在 genymotion 上或在我自己的手机上模拟)在标题标题和内容 block (“ion-content”)中加载任何内容。请参见下面的屏幕截图。

我很确定它来 self 正在使用的拦截器，因为在此之前，该应用程序可以在任何平台上运行。此外，一旦我删除拦截器，它就会再次工作。这是代码。

请注意，我正在检查调用了哪个 url，这样我就不会陷入循环依赖或检查无用的 url，只有对我的 api 的调用才会通过。

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;
            }

        }

    }]);

});

有什么想法会导致此错误吗？ (顺便说一句，控制台在浏览器上没有显示任何错误)。

更新:

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;

    }
};

})

Answer 1

你安装了吗cordova whitelist plugin ？

cordova plugin add cordova-plugin-whitelist

或者如果您想保存对 config.xml 文件的引用:

cordova plugin add cordova-plugin-whitelist --save

如果您没有，您的设备将无法访问外部资源。

您可以找到更多信息 here .

更新:

我已经检查了你之前的回答。
拦截器的想法是拦截对外部服务的调用，在管道中插入一些 Action 。

我会改变你的拦截器:

$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);
        }
    }
}]);

如果您查看上面的拦截器，它会管理对外部资源 (REST api) 的所有请求，并在需要时将不记名 token 附加到授权 header 。

响应没有做太多，因为它只是为了记录目的。

responseError 是您应该拦截并检查 token 是否已过期、获取新 token 并重新提交请求的地方。

我们检查用户是否未获得请求的授权:

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

如果不是，我们请求一个新的访问 token 。我想您的 OauthService 会这样做。如果我们有一个新的访问 token :

var access_token = OauthService.token();

我们可以再次将访问 token 附加到请求 header :

rejection.config.headers['Authorization'] = 'Bearer ' + access_token;

并重新提交之前的请求:

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

如果您想了解更多关于拦截器的信息，您可以 read these blogs .