Using resolve in ui-router to authenticate a user - angularjs

Question

I'm having a issue in my Angular app with regards to the resolve section of the ui-router. I'm trying to present a login modal the first time a user hits the website.
In my app.config.js, how do I inject my 'loginService':
angular
.module('rage')
.config(config);
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
.state('main', {
url: "/dashboard",
templateUrl: "app/views/dashboard.html",
controller: 'MainCtrl',
data: { pageTitle: 'RAGE', requireLogin: true },
resolve: {
// *** WHERE DO I INJECT 'loginService' ? ***
authUser: function () {
return loginService.loginModal().then(function (user) {
$rootScope.userID = user.userId;
userService.openUserSession(razorEnvJson).then(function (data) {
// assign some scope vars here..
});
})
}
}
})
.state('login', {
url: "/login",
templateUrl: "app/views/login-view.html",
controller: 'LoginCtrl'
})
}
loginService code:
(function () {
'use strict';
angular.module('rage').service('loginService',
['$rootScope', '$modal', 'datacontext', 'userService', login]);
function login($rootScope, $modal, datacontext, userService) {
var modalInstance = null
this.loginModal = function(){
modalInstance = $modal.open({
animation: true,
templateUrl: 'app/components/login/login.html',
controller: 'LoginCtrl as login',
});
return modalInstance.result.then(function (user) {
return user;
});
};
}
})();
LoginCtrl controller code:
(function () {
'use strict';
angular.module('rage').controller('LoginCtrl',
['$rootScope', '$scope', '$modalInstance', '$q', 'datacontext', 'userService', authenticate]);
function authenticate($rootScope, $scope, $modalInstance, $q, datacontext, userService) {
var login = this;
// OK,CANCEL CLICK EVENTS FROM MODAL !!!
$scope.ok = function () {
// var user = userService.authenticateWebUser(); // **** TBD ****
var user = {userId: login.userId, pswd: login.pswd};
$modalInstance.close(user);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
})();
I've also attempted $rootScope.$on('$stateChangeStart' event inside app.js to transition the state from main to login, but that hangs up on me.
**** MY UPDATED APP.CONFIG.JS CODE, SEPT 18 ****
Here is the proper usage of resolve: using ui-router states.
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
.state('main', {
url: "/dashboard",
templateUrl: "app/views/dashboard.html",
controller: 'MainCtrl',
data: { pageTitle: 'RAGE', requireLogin: true },
resolve: {
authUser: ['$rootScope', 'loginService', 'userService', function ($rootScope, loginService, userService) {
return loginService.loginModal().then(function (user) {
$rootScope.userID = user.userId;
initSession(user, $rootScope, loginService, userService);
})
}]
}
})
.state('login', {
url: "/login",
templateUrl: "app/views/login-view.html",
controller: 'LoginCtrl'
})
}
function initSession(user, $rootScope, loginService, userService) {
userService.getInitParams().then(function (envJson) {
// some code omitted here...
userService.openUserSession(envJson).then(function (data) {
var sessionID = data.data[0];
$rootScope.rageSessionVars.sessionID = sessionID;
$rootScope.rageSessionVars.userID = $rootScope.userID; // *** HOW TO SUSPEND ALL CODE UNTIL userID IS ASSIGNED ??? ***
console.log("sessionID = " + sessionID);
$rootScope.rageSessionVars.currDashboardName = "Default";
});
});
}
* MainCtrl controller code *
(function () {
'use strict';
angular.module('rage')
.controller('MainCtrl',
['$rootScope', '$scope', '$interval', '$window', '$state', '$location', 'widgetDefinitions',
'defaultWidgets', 'gadgetInitService', main]);
function main($rootScope, $scope, $interval, $window, $state, $location, widgetDefinitions, defaultWidgets, gadgetInitService, authUser) {
var main = this;
**** authUser IS NEVER DEFINED !!!
if ($scope.userID == undefined) { /// *** NOTHING WORKS HERE !!! ***
//$state.go('login');
//$location.url('index.html#/?login');
//return ;
}
if ($scope.userID == undefined) {
main.userName = "risk user";
}
else {
$scope.main.userName = $scope.userID;
}
}
})();

Answer 1

Edit:
I see your getting confused on the use of 'Resolve'.
It should be used when you want some data passed into the controller when it's being run. Not to run a function before initiating a controller.
This isn't what you really want in this situation.
It kinda depends on your authentication method, cookies/tokens etc.
Here is a similar method that I would follow.
Have a Login service which handles the following
-- Login/Logout of the user
-- Checks if the user is authenticated
In your Controller call your service to check if the user is logged in.
-- If the user is not logged in, then prompt login screen
-- If the user is logged in, then let the controller continue execution
How I handle it, is whenever the user makes an UnAuthorised request where the server returns a 401 response I call my LoginService to prompt the login screen again.
I use an authInterceptor in Angular to catch any 401 response from the server.
Here is a nice guide on it: http://onehungrymind.com/winning-http-interceptors-angularjs/
This allows you to write your Unauthorized handler in one place.
Hope that makes it a bit clearer.