Corner solution

Question

This is my ui-router configurator for a specific route

 state('app.merchant', { url: '/start/merchant', views: { 'mainView': { templateUrl: "partials/start_merchant.html" } }, css: ['assets/vendor/bootstrap/dist/css/bootstrap.css','assets/css/styles.css','assets/css/plugins.css'], title: 'Buttons', resolve: { userRequired: userRequired, } resolve: loadSequence('flow','angularFileUpload','MerchantWizardCtrl') }) 

The problem is that the page is displayed even if it does not meet the userRequired requirement. This is the function for userRequired :

 function userRequired($q, $location, $auth,Account) { var deferred = $q.defer(); if ($auth.isAuthenticated()) { Account.getUserStatus() .then(function(response){ if(response.data == true){ deferred.resolve(); } else{ deferred.reject(); } }) .catch(function(response){ console.log("Error has occur, Please contact adminstrator"); }); } else { deferred.resolve(); } return deferred.promise; } 

How to resolve this? Thanks!!

EDIT

loadsequence:

 function loadSequence() { var _args = arguments; return { deps: ['$ocLazyLoad', '$q', function ($ocLL, $q) { var promise = $q.when(1); for (var i = 0, len = _args.length; i < len; i++) { promise = promiseThen(_args[i]); } return promise; function promiseThen(_arg) { if (typeof _arg == 'function') return promise.then(_arg); else return promise.then(function () { var nowLoad = requiredData(_arg); //console.log(nowLoad) if (!nowLoad) return $.error('Route resolve: Bad resource name [' + _arg + ']'); return $ocLL.load(nowLoad); }); } function requiredData(name) { if (jsRequires.modules) for (var m in jsRequires.modules) if (jsRequires.modules[m].name && jsRequires.modules[m].name === name) return jsRequires.modules[m]; return jsRequires.scripts && jsRequires.scripts[name]; } }] }; } 

Answer 1

You do not reject the promise when getUserStatus () services throw an exception (in .catch ()), and also when it is not authenticated, you must reject it, try this solution:

 state('app.merchant', { url: '/start/merchant', views: { 'mainView': { templateUrl: "partials/start_merchant.html" } }, css: ['assets/vendor/bootstrap/dist/css/bootstrap.css','assets/css/styles.css','assets/css/plugins.css'], title: 'Buttons', resolve: { userRequired: userRequired, loadSequence: loadSequence('flow','angularFileUpload','MerchantWizardCtrl') } }) function userRequired($q, $location, $auth,Account) { return $q(function(resolve, reject) { if ($auth.isAuthenticated()) { Account.getUserStatus() .then(function(response){ if(response.data == true){ resolve(); } else{ reject(); } }) .catch(function(response){ console.log("Error has occur, Please contact adminstrator"); reject() }); } else { reject() } }); } function loadSequence() { var _args = arguments; return ['$ocLazyLoad', '$q', function ($ocLL, $q) { var promise = $q.when(1); for (var i = 0, len = _args.length; i < len; i++) { promise = promiseThen(_args[i]); } return promise; function promiseThen(_arg) { if (typeof _arg == 'function') return promise.then(_arg); else return promise.then(function () { var nowLoad = requiredData(_arg); //console.log(nowLoad) if (!nowLoad) return $.error('Route resolve: Bad resource name [' + _arg + ']'); return $ocLL.load(nowLoad); }); } function requiredData(name) { if (jsRequires.modules) for (var m in jsRequires.modules) if (jsRequires.modules[m].name && jsRequires.modules[m].name === name) return jsRequires.modules[m]; return jsRequires.scripts && jsRequires.scripts[name]; } }] } 

• The deferral method for the Promise A + method has been changed (I recommend this method).

• Add reject () inside .catch

• Authentication Failure

Answer 2

I think the problem is that you are returning a promise that, by design, will allow your application to continue loading while it tries to determine if UserRequired is UserRequired .

Therefore, instead of using an asynchronous approach such as a promise, simply enable this dependency synchronously, and this will prevent the page from loading.

Here is how I could change UserRequired :

 function userRequired($location, $auth, Account) { if ($auth.isAuthenticated()) { Account.getUserStatus() .then(function(response){ if(response.data == true){ console.log('Logged in!'); } else { console.log('Not authorized!'); $location.url('/logout'); } }) .catch(function(response){ console.log("Error has occurred, please contact administrator."); $location.url('/logout'); }); } else { console.log('Not authorized!'); $location.url('/logout'); } } 

Answer 3

First of all, your configuration object has two values:

 { resolve: {userRequired: userRequired} resolve: loadSequence('flow','angularFileUpload','MerchantWizardCtrl') } 

You should have something like:

 { resolve : { userRequired : userRequired, loadSequence : loadSequence('flow','angularFileUpload','MerchantWizardCtrl') } 

Also your catch should return a rejected promise

 return $q.reject(); 

And as said above, reject when not authenticated. You can debug chrome to make sure all promises invoke and return the correct values.