问题描述
我正在尝试将登录引入用户在应用程序中导航的方式.
如果该页面满足特定要求,我假装将用户重定向到他在导航到登录页面之前所在的页面
阻止事件从 $stateChangeStart 停止,状态更改如预期,但是当我运行 $state.go('into_somewhere') 时,我进入了一个无限循环
我的 angular 版本是 1.3.1,ui-router 是最新的
.factory('RouteHistory', function ($rootScope,$log, $state, Auth, $urlRouter, $timeout) {//用户进入页面后var currentState = '';//当用户试图访问他没有权限的页面时//或者需要用户登录变量挂起状态 = '';var isMenuTogglerVisible = false;var skipFromStateVal = true;$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){event.preventDefault();if (toState.name == '登录' && fromState.name != '登录'){$log.log('Ui-router: 改为登录');//$urlRouter.sync();$state.go('登录')//pendingState = fromState;//$log.log('Peding 状态更新为:' + pendingState.name );//$urlRouter.sync();}if (fromState.name == 'login' && Auth.isLoggedIn()) {$log.log('Ui-router: 从登录开始');//$state.go(fromState.name);$超时(功能(){//$state.go('home', null, {/*reload: true, location: 'replace'*/});$state.go('浏览机器');//$urlRouter.sync();},2000)}$log.log({'toState': toState,'toParams': toParams,'来自状态':来自状态,'fromParams': fromParams})})返回 {};});
一般来说,让我们重定向 ($state.go()
) 仅在需要时.在其他情况下,从事件侦听器中退出:
if (toState.name === '登录' ){//她/他是否尝试去登录?- 让他/她走返回;}如果(Auth.isLoggedIn()){//登录了吗?- 可以去任何地方返回;}//别的$state.go('登录')
这是简化的逻辑,但表明我们应该仅在需要时更改为执行.还有一些其他示例具有更详细的实现和 plunkers:
- 混淆 $locationChangeSuccess 和 $stateChangeStart
- Angular UI 路由器:home 的嵌套状态以区分登录和注销
- 其他登录示例
- angular ui-router 登录认证
这不再是循环了.请在此处
查看I'm trying to introduce login into the way the user navigates accross the application.
I pretend to redirect the user to the page were he was before he navigate to the login page if that page meets specific requirements
Preventing the event from the $stateChangeStart stop's the state change like expected but when i run the $state.go('into_somewhere') i enter an infinit loop
My angular version is 1.3.1 and the ui-router is the latest
.factory('RouteHistory', function ($rootScope,$log, $state, Auth, $urlRouter, $timeout) {
// after the user enter a page
var currentState = '';
// when the user is trying to access a page that he has not permissions
// or that requires the user to be logged in
var pendingState = '';
var isMenuTogglerVisible = false;
var skipFromStateVal = true;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
event.preventDefault();
if (toState.name == 'login' && fromState.name != 'login'){
$log.log('Ui-router: changing to login');
// $urlRouter.sync();
$state.go('login')
//pendingState = fromState;
//$log.log('Peding state updated to:' + pendingState.name );
//$urlRouter.sync();
}
if (fromState.name == 'login' && Auth.isLoggedIn()) {
$log.log('Ui-router: going from login');
//$state.go(fromState.name);
$timeout(function(){
// $state.go('home', null, {/*reload: true, location: 'replace'*/});
$state.go('browse-machine');
//$urlRouter.sync();
},2000)
}
$log.log({
'toState': toState,
'toParams': toParams,
'fromState': fromState,
'fromParams': fromParams
})
})
return {
};
});
In general I would say, let's redirect ($state.go()
) only if needed. In other cases, get out from the event listener:
if (toState.name === 'login' ){
// doe she/he try to go to login? - let him/her go
return;
}
if(Auth.isLoggedIn()){
// is logged in? - can go anyhwere
return;
}
// else
$state.go('login')
This is simplified logic, but shows, that we should change to execution only if needed. There are some other examles with more detailed implementation and plunkers:
- Confusing $locationChangeSuccess and $stateChangeStart
- Angular UI Router: nested states for home to differentiate logged in and logged out
- other example of log in
- angular ui-router login authentication
As provided in the comment, there was plunker, which I changed like this here
...
// three new lines
if (toState.name === 'specialRoute'){
return;
}
if (fromState.name=='route1'){
event.preventDefault();
$state.go('specialRoute')
}
And this is not looping anymore. Please, check it here
这篇关于$on('$stateChangeStart') 内的 Ui-Router $state.go 导致无限循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!