In my angularjs app, I am checking if user lands on landing page and is already authenticated, then redirect him to home page.
.state('landingpage', {
abstract: "true",
url: "/landingpage",
templateUrl: "app/landingpage/landingpage.html",
resolve: {
AutoLoginCheck: ['$state', '$window', function ($state, $window) {
if($window.localStorage.access_token != null)
{
if($window.sessionStorage.access_token == null) {
$window.sessionStorage.access_token = $window.localStorage.access_token;
}
UserInfoService.SetUserAuthenticated(true);
// it is not redirecting
return $state.go('app.home');
}
}]
}
})
The problem is that though all the resolve code is successfully run, user is not getting redirected to app.home. Can someone tell why this happens?
Note: The state 'app' also has a resolve in which it fetches the data to be displayed in 'app.home' state.
There can be two solutions to your problem
Firstly you can emit an event and the listener will handle your state transition. You can implement the listener in anywhere in a parent controller
Secondly you can implement the $stateChangeStart hook and check your redirection condition there
$rootScope.$on('$stateChangeStart', function (event, toState) {
if (toState.name === 'landingpage') {
if (!isAuthenticated()) { // Check if user allowed to transition
event.preventDefault(); // Prevent migration to default state
$state.go('home.dashboard');
}
}
});
.state('landingpage', {
abstract: "true",
url: "/landingpage",
templateUrl: "app/landingpage/landingpage.html",
resolve: {
AutoLoginCheck: ['$state','$window', '$q','$timeout', function ($state, $window,$q,$timeout) {
if($window.localStorage.access_token != null)
{
if($window.sessionStorage.access_token == null) {
$window.sessionStorage.access_token = $window.localStorage.access_token;
}
UserInfoService.SetUserAuthenticated(true);
$timeout(function() {
$state.go('app.home')
},0);
return $q.reject()
}
}]
}
})
This would work for you.
You can use $location.url('/') instead.
You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.
You could have a controller that checks for the AuthState and have the redirection accordingly.
.state('landingpage', {
abstract: "true",
url: "/landingpage",
templateUrl: "app/landingpage/landingpage.html",
resolve: {
AutoLoginCheck: ['$window', function ($window) {
if($window.localStorage.access_token != null)
{
if($window.sessionStorage.access_token == null) {
$window.sessionStorage.access_token = $window.localStorage.access_token;
}
//assuming userInfoService does the authentication
var isAuthenticated = userInfoService.SetUserAuthenticated(true);
return isAuthenticated;
}
}]
},
controller: ['$state','AutoLoginCheck', function($state, AutoLoginCheck){
if(AutoLoginCheck){
//authenticated
$state.go('app.home');
} else {
//redirect to unauthenticated page
$state.go('....');
}
}]
})
This is an old thread, but I use $location.path() to accomplish redirection inside of a state.resolve() block
Anyway resolve waiting for promise state . Best thing what you can do is return promise and add timeout for your state:
resolve: {
AutoLoginCheck: ['$state', '$window', '$timeout', '$q', function ($state, $window, $timeout, $q) {
var deferred = $q.defer();
if(user.isLogin()){
deferred.resolve();
}else{
$timeout(function(){
$state.go('app.home');
}
deferred.reject();
}
return deferred.promise;
}]
