How to skip login page if user is already logged in ionic framework

Question

I am working on an IONIC application where I have checked if user is already logged in and if user is already logged then application should redirect on dashboard. This functionality is working well, but the application first showing login page for couple of seconds and then redirect to the dashboard.

app.js

$rootScope.$on("$locationChangeStart", function (event, next, current) {
    var prefs = plugins.appPreferences;
    prefs.fetch('iuserid').then(function (value) {
        if (value != '') {
            $state.go('app.dashboard');
        }
    });
.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })
        .state('login', {
            url: "/login",
            templateUrl: "templates/login.html",
            controller: 'LoginCtrl'
        })
        .state('app.dashboard', {
            url: "/dashboard",
            views: {
                'menuContent': {
                    templateUrl: "templates/dashboard.html",
                    controller: 'DashboardCtrl'
                }
            }
        })
        ;
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/login');
    });
});

I don't know where I am making mistake.

Edit: I am able to authenticate and redirect to the dashboard but my problem is the login page displayed for few (up to 2) seconds and then redirect to the dashboard and I am working on IONIC application

Second Edit I found the problem but don't know the solution. Preference work greatly in $ionicPlatform.ready but do not work in $locationChangeStart. And I need preference in $locationChangeStart because it runs before $ionicPlatformReady. I desperately need the solution.

Answer 1

I do the following:

in the app.js

.state('login', {
    url: "/login",
    templateUrl     : "templates/session/login.html",
    controller      : 'SessionCtrl'
  })

  .state('register', {
    url: "/register",
    templateUrl     : "templates/session/register.html",
    controller      : 'SessionCtrl'
  })
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl     : "templates/menu.html",
    controller      : 'AppCtrl',
    onEnter: function($state, Auth){
        if(!Auth.isLoggedIn()){
           $state.go('login');
        }
    }
  })
  .state('app.main', {
    url: "/main",
    views: {
      'menuContent': {
        templateUrl   : "templates/main_menu.html",
        controller    : "MainMenuCtrl"
      }
    }
  })

  $urlRouterProvider.otherwise('/app/main');

Auth is a factory, it stores the auth session in localstorage.

angular.module('auth.services', [])
.factory('Auth', function () {
   if (window.localStorage['session']) {
      var _user = JSON.parse(window.localStorage['session']);
   }
   var setUser = function (session) {
      _user = session;
      window.localStorage['session'] = JSON.stringify(_user);
   }

   return {
      setUser: setUser,
      isLoggedIn: function () {
         return _user ? true : false;
      },
      getUser: function () {
         return _user;
      },
      logout: function () {
         window.localStorage.removeItem("session");
         window.localStorage.removeItem("list_dependents");
         _user = null;
      }
   }
});

Answer 2

I think you should listen to the event $stateChangeStart on the $rootScope , you can listen to this event during runtime, like this:

angular.module("myapp.permission").run($rootScope){
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        var loggedIn = true;
        if(loggedIn) {
            $state.go('app.dashboard');
        }
    }
}

Answer 3

Guys try this elegant solution:

1. if the user is not logged in and login is required it redirect to login.

2. if the user try to get to login and he already logged in, prevent him from doing it.

3. mark every path as "requireAuth" and it will work.

4. place your code in app.js

    .run(function ($rootScope, $location, authService) { $rootScope.$on('$stateChangeStart', function (ev, to, toParams, from, fromParams) { if (to.requireAuth && !authService.isAuthed()) { $location.path("/login"); } else if (to.name == 'login' && authService.isAuthed()) { ev.preventDefault(); $location.path("/dashboard"); } }); }) 

Answer 4

Remove

$urlRouterProvider.otherwise('/loginpage')

at the bottom of routes.js file.

Answer 5

Inside your " run " block and outside of $ionicPlatform.ready you can use this:

    //Check if user loggedin and redirect to login page if not

$rootScope.$on('$stateChangeStart', function (event, toState) { 

    //Check only if you are not in login page              
    if(toState.name.indexOf('app') !== -1 ) {

      // If user is not logged, will redirect to login page, eg:
      var prefs = plugins.appPreferences;
      prefs.fetch('iuserid').then(function (value) {
         if (value != '') {
            $state.go('login');
         }
      });
    }                         

});  

After you must change your:

$urlRouterProvider.otherwise('/login');

for this:

$urlRouterProvider.otherwise('/dashboard');

The idea is directly route to dashboard and if is not logged in, will redirect to login page.