ui-router check state on page load

Question

On page load my application checks if the user still has a valid session on the server. If the user is still logged in the application should redirect him to his dashboard if not already in a (sub)state if it.

The session is checked using a custom service and the state redirect should happen in it's callback. This all happens in a function init at the page initialization.

It doesn't work though because the ui-router state seens to still be empty during this point of execution. How can I call the function doing all this so the state is initialized then? When exactly is the state initialized?

index.html

<!DOCTYPE html> <html lang="en"> [...] <body ng-app="name" ng-controller="mainController" ng-init="init()" ui-view> </body> </html>

mainController

.controller('mainController', function ($scope, $state, session, [...]) { $scope.init = function () { session.isLoggedIn().success(function (response) { if (response) { if (!$state.includes('dashboard')) { $state.go('dashboard'); } } else { $scope.logout(); } }); }; })

EDIT: Route definitions

.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('loading', { url: '/', template: '...' }) .state('login', { url: '/login', views: {...} }) .state('dashboard', { url: '/dashboard', views: {...} }) .state('dashboard.sub', { url: '/sub/{param:int}', views: {...} }) })

It seems you haven't defined the dashboard state in your routes. — Akshay Khetrapal
– Akshay Khetrapal, Commented Sep 4, 2016 at 9:20

Deproblemify · Accepted Answer · 2016-09-14 14:12:34Z

Obviously the states aren't initialised when the init() function is being called. I cannot tell you, where to place the init() function to make this possible nor if it is even possible.

What solves the issue it to wait for the first $stateChangeSuccess-Event which will tell you that the state is now loaded. In there you can call the checking function – in this specific example you can even call the whole init() function:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) { $scope.init(); });

cnorthfield · Accepted Answer · 2016-09-04 09:54:58Z

You can simply make use of resolve:

.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('loading', { url: '/', template: '...' }) .state('login', { url: '/login', views: {...} }) .state('dashboard', { url: '/dashboard', views: {...}, resolve: { isLoggedIn: function(session, $q, $state, $timeout) { var deferred = $q.defer(); return session.isLoggedIn().success(function (response) { if (response) { // user is logged in so carry on... return deferred.resolve(); } else { // not logged in so go to login page $timeout(function() { $state.go('login'); deferred.reject(); }); } }); } }) .state('dashboard.sub', { url: '/sub/{param:int}', views: {...} }) })

This will make the request to check if the user is logged in, if the user is logged in then you resolve the promise and load the state as normal, otherwise redirect the user to the login page.

Collectives™ on Stack Overflow

ui-router check state on page load

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related