Refactor angular ui-router resolver to use it globally - angularjs

Question

I have resolve method inside angular config. It was written to protect the view from unauthorized access. Now the problem is, if I create a different route file, I have to copy the same resolve on each file. Is there any other way so that I can write it once and use it everywhere?
(function(){
'use strict';
var app = angular.module('app');
app.config(/* #ngInject */ function($stateProvider, $urlRouterProvider) {
var authenticated = ['$q', 'MeHelper', '$state', function ($q, MeHelper, $state) {
var deferred = $q.defer();
MeHelper.ready()
.then(function (me) {
if (me.isAuthenticated()) {
deferred.resolve();
} else {
deferred.reject();
$state.go('login');
}
});
return deferred.promise;
}];
$stateProvider
.state('index', {
url: "",
views: {
"FullContentView": { templateUrl: "start.html" }
}
})
.state('dashboard', {
url: "/dashboard",
views: {
"FullContentView": { templateUrl: "dashboard/dashboard.html" }
},
resolve: {
authenticated: authenticated
}
})
$urlRouterProvider.otherwise('/404');
});
})();
Edit: MeHelper is a Service.

Answer 1

To refactor your code, you should register a service and take the authentication code to the service.
Authenticate service:
app.factory('authenticateService', ['$q', 'MeHelper',
function($q,MeHelper){
var obj = {};
obj.check_authentication = function(params)
{
var deferred = $q.defer();
MeHelper.ready()
.then(function (me) {
if (me.isAuthenticated()) {
deferred.resolve();
} else {
deferred.reject();
$state.go('login');
}
});
return deferred.promise;
}
return obj;
}
]);
Then, use this service in any route file in resolve, taking this service name in dependency injection or the function parameter,
Route configuration file:
(function(){
'use strict';
var app = angular.module('app');
app.config(/* #ngInject */ function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"FullContentView": { templateUrl: "start.html" }
}
})
.state('dashboard', {
url: "/dashboard",
views: {
"FullContentView": { templateUrl: "dashboard/dashboard.html" }
},
resolve: {
authenticated:
function(authenticateService) {
return authenticateService.check_authentication();
}
}
})
$urlRouterProvider.otherwise('/404');
});
})();
watch the below lines, this is what we changes in the route configuration to resolve.
the service is injected in below lines:
resolve: {
authenticated:
function(authenticateService) {
return authenticateService.check_authentication();
}
}

Answer 2

Do your check on route change.
app.run(function ($rootScope, $state) {
$rootScope.$on('$locationChangeSuccess', function () {
if (unauthorized && $state.current.name !== 'login') {
$state.go('login');
}
});
});