How to set my initial page to a Login html page

Question

In my AngularJS SPA, I would like to force a sort of splash page with a login form. Once the user is authenticated, then I would like to load the full website.

Here is my app.config, which currently triggers a modal logon. However, this is not the right solution for my application. I do not want to load any nav bars UNTIL the user is fully logged in.

angular
.module('rage')
.config(config);

function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
 .state('corp', {
  url: "/corp",
  templateUrl: "app/views/corp.html",
  data: { pageTitle: 'RAGE' }
 })
 .state('maint', {
  url: "/maint",
  templateUrl: "app/views/maint.html",
  data: { pageTitle: 'RAGE' }
 })
 .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, authUser) {
    return loginService.loginModal().then(function (user) {
     $rootScope.userID = user.userId;
     initSession(user, $rootScope, loginService, userService);
     return user;
    })
   }]
  }
 })
 .state('login', {
  url: "/login",
  templateUrl: "app/components/login/login.html",
  controller: 'LoginCtrl'            
 })
 
}
function initSession(user, $rootScope, loginService, userService) {

userService.getInitParams().then(function (envJson) {
 $rootScope.rageSessionVars = envJson;
 userService.initRazor(envJson).then(function (data) {
  var response = data.status;
  if (response.match(/SUCCESS/g)) {
   userService.openUserSession(razorEnvJson).then(function (data) {
    // ...
   });
  }
 });
});

}

Should I handle this in my app.config ?

Any advice is appreciated.

thanks, Bob

Please have a look at the answers to this [SO question](http://stackoverflow.com/questions/11541695/redirecting-to-a-certain-route-based-on-condition). Is there something that's working for you? I think binding to `$stateChangeStart` event in run method could work for you. — AWolf, Oct 09 '15 at 21:07
My main issue is that, although I do have a resolve working on my"main" state above, the login modal I use still allows the side and top nav areas to load in the background. I need to halt all loading..thx. — bob.mazzo, Oct 09 '15 at 21:40

Vikas Sharma · Accepted Answer · 2015-10-13T15:42:32.930

You can do one thing.Make a state like below.

state("context", {
            url:"/context",
            template: '',
            controller : "contextCtrl"
}).

And in 'contextCtrl' you should check if the user is authenticated or not like below

app.controller("contextCtrl",function($scope, $rootScope, userLoginService,$state, SessionService){
    if(SessionService.getSessionUser()==null){
            $state.go("login");
    }else{
        if(SessionService.getSessionUser().authorities[0].authority=="ROLE_ADMIN"){
            $state.go("dashboard");
        }
    }
});

SessionService in above code is your localStorageService which stores the logged in user. Now in dashBoardCtrl of dashboard state (MainCtrl in your case) you should check on every request whether the user is authenticated or not. Following service checks the response of every request.If the response's status is 403,page will be redirected to login page.

service.factory('APIInterceptor', function($q) {
       return {
         'response': function(response) {
               // do something on error
                 if(response.status == 302 ){
                  window.location.href = contextPath;  
                  return $q.reject(response);
                 }
                 return response;
             },
         'responseError': function (rejection) {
             if(rejection.status === 0) {
              location.reload();
             }
             if(rejection.status == 403 ){
                 window.location.href = contextPath+'/#/login';
                  return $q.reject(response);
             }
             return $q.reject(rejection);
         }
      };
    })

With this,if the user is not authenticated he will be redirected to login page.Hope it helps you.

So I would inject the APIinterceptor svc into my MainCtrl in order to ensure that the user is authenticated upon each http request? And where is the authUser api method getting called? — bob.mazzo, Oct 12 '15 at 15:14
Inject your APIinterceptor in your angular module.There is no need to add it in MainCtrl. It will work automatically.It just checks the response of every request,if its 403 redirection occurs. — Vikas Sharma, Oct 13 '15 at 15:48
would you have time to answer http://stackoverflow.com/questions/33109250/angular-ng-submit-not-firing-the-desired-controller-method ? — bob.mazzo, Oct 13 '15 at 17:45
how do I inject the $location and/or $state provider into `APIInterceptor`. In see you're using `location` from the native browser. — bob.mazzo, Nov 24 '15 at 22:16
Replace service.factory('APIInterceptor', function($q) { with service.factory('APIInterceptor',function($q, $location,$state){ — Vikas Sharma, Nov 25 '15 at 04:32

How to set my initial page to a Login html page

1 Answers1