Angularjs 离子：无内容/使用拦截器的白色屏幕

我成功地在Ionic应用程序中使用了拦截器（AngularJs）

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

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

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

请注意，我正在检查调用了哪个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;
            }

        }

    }]);

});

你知道是什么导致了这个错误吗？（顺便说一句，控制台在浏览器上没有显示错误）

更新：

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;

    }
};

})

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;

    }
};

})

你安装了吗

或者，如果要保存对config.xml文件的引用：

cordova plugin add cordova-plugin-whitelist --save

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

你可以找到更多信息

更新：

我已经检查了你以前的答案。
拦截器的思想是拦截对外部服务的调用，并在管道中插入一些操作

我将更改您的拦截器：

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

如果您查看上面的拦截器，它将管理对外部资源（RESTAPI）的所有请求，并在需要时将承载令牌附加到授权头

响应没有多大作用，因为它仅用于日志记录目的

responseError

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

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

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

如果没有，我们请求一个新的访问令牌。我想你的OauthService就是这么做的。 如果我们有一个新的访问令牌：

var access_token = OauthService.token();

我们可以再次将访问令牌附加到请求头：

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

并重新提交以前的请求：

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

---

如果你想了解更多关于拦截器的信息，你可以。

是的，我已经在使用它了。我可以在没有拦截器的情况下访问外部资源。responseError允许我从以前的代码中找到一个错误。在模拟时无法识别includes，因此我将其替换为indexOf，它可以正常工作。无论如何，我会继续挖掘，你的解决方案有点复杂，所以我需要多一点时间来实现它。我不知道如何使用这些头，因为我在url中调用api时使用了访问令牌，而不是在头中。拒绝状态也完成了部分工作。非常感谢。很高兴我帮了忙。我的答案中包含了一些链接。您可以找到许多关于拦截器及其工作原理的有用信息。干杯。您是否在

OauthService.token（）

中返回承诺？我不这么认为，我对承诺/延迟的概念有点陌生。我用OauthService源代码更新了这篇文章，但是在第一次启动时，它还不应该调用api（登录页面）。因此，我们还没有经历这种情况，它已经显示了一个白色屏幕。我不知道拦截机是不是把我的路线弄乱了。我想是的。检查我的最新答案。对于处理承载令牌的拦截器应该如何工作有一个大致的概念。