How can I fix 'Maximum call stack size exceeded' AngularJS
Solution 1:
I've created an example, playing with default pages and auth/unauth user. Similar issue could be seen here
Firstly this would be the listener:
app.run(function ($rootScope, $state, $location, Auth) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState) {
var shouldLogin = toState.data !== undefined
&& toState.data.requireLogin
&& !Auth.isLoggedIn ;
// NOT authenticated - wants any private stuff
if(shouldLogin)
{
$state.go('login');
event.preventDefault();
return;
}
// authenticated (previously) comming not to root main
if(Auth.isLoggedIn)
{
var shouldGoToMain = fromState.name === ""
&& toState.name !== "main" ;
if (shouldGoToMain)
{
$state.go('main');
event.preventDefault();
}
return;
}
// UNauthenticated (previously) comming not to root public
var shouldGoToPublic = fromState.name === ""
&& toState.name !== "public"
&& toState.name !== "login" ;
if(shouldGoToPublic)
{
$state.go('public');console.log('p')
event.preventDefault();
}
// unmanaged
});
});
What is happening?
- We check if user is logged in. If not, but requires access to not public stuff... we redirect to login
- user is logged in but not going directly to main... we transfer him
- user is not logged in, but not going to public ... we redirect
- else... let it be
And here are states:
$stateProvider
// available for anybody
.state('public',{
url : '/public',
template : '<div>public</div>',
})
// just for authenticated
.state('main',{
url : '/main',
template : '<div>main for authenticated</div>',
data : {requireLogin : true },
})
// just for authenticated
.state('other',{
url : '/other',
template : '<div>other for authenticated</div>',
data : {requireLogin : true },
})
// the log-on screen
.state('login',{
url : '/login',
templateUrl : 'tpl.login.html',
controller : 'LoginCtrl',
})
Check plunker here or here
Solution 2:
Use $state.go("main", {}, {notify:false}); for not notify to "$stateChangeStart"event.
// NOT authenticated - wants any private stuff
if(shouldLogin)
{
$state.go("main", {}, {notify:false});
event.preventDefault();
return;
}
// authenticated (previously) comming not to root main
if(Auth.isLoggedIn)
{
var shouldGoToMain = fromState.name === ""
&& toState.name !== "main" ;
if (shouldGoToMain)
{
$state.go("main", {}, {notify:false});
event.preventDefault();
}
return;
}