我正在为 $stateChangeStart
编写处理程序:
var stateChangeStartHandler = function(e, toState, toParams, fromState, fromParams) {
if (toState.includes('internal') && !$cookies.MySession) {
e.preventDefault();
// Some login stuff.
}
};
$rootScope.$on('$stateChangeStart', stateChangeStartHandler);
toState
没有includes方法。我应该做一些不同的事情,还是有办法做我想做的事情?此外,当//一些登录内容包括
$state.go(...)
,我得到一个无限循环。什么可能导致这种情况?这是一个更完整的示例,展示了我们最终要工作的内容:
angular.module('test', ['ui.router', 'ngCookies'])
.config(['$stateProvider', '$cookiesProvider', function($stateProvider, $cookiesProvider) {
$stateProvider
.state('public', {
abstract: true
})
.state('public.login', {
url: '/login'
})
.state('tool', {
abstract: true
})
.state('tool.suggestions', {
url: '/suggestions'
});
}])
.run(['$state', '$cookies', '$rootScope', function($state, $cookies, $rootScope) {
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
if (toState.name.indexOf('tool') > -1 && !$cookies.Session) {
// If logged out and transitioning to a logged in page:
e.preventDefault();
$state.go('public.login');
} else if (toState.name.indexOf('public') > -1 && $cookies.Session) {
// If logged in and transitioning to a logged out page:
e.preventDefault();
$state.go('tool.suggestions');
};
});
});
我不喜欢使用
indexOf
在 toState
中搜索特定状态.感觉很幼稚。我不知道为什么toState
和 fromState
不能是 $state
的实例服务,或者为什么 $state
服务无法在其方法中接受状态配置覆盖。无限循环是由我们的错误引起的。我不喜欢这个,所以我仍在寻找更好的答案。
最佳答案
建议一
当您向 $stateProvider.state
添加对象时然后将该对象与状态一起传递。因此,您可以添加其他属性,以便稍后在需要时阅读。
路由配置示例
$stateProvider
.state('public', {
abstract: true,
module: 'public'
})
.state('public.login', {
url: '/login',
module: 'public'
})
.state('tool', {
abstract: true,
module: 'private'
})
.state('tool.suggestions', {
url: '/suggestions',
module: 'private'
});
$stateChangeStart
事件使您可以访问 toState
和 fromState
对象。这些状态对象将包含配置属性。自定义模块属性的示例检查
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
if (toState.module === 'private' && !$cookies.Session) {
// If logged out and transitioning to a logged in page:
e.preventDefault();
$state.go('public.login');
} else if (toState.module === 'public' && $cookies.Session) {
// If logged in and transitioning to a logged out page:
e.preventDefault();
$state.go('tool.suggestions');
};
});
我没有更改 cookie 的逻辑,因为我认为这超出了您的问题的范围。
建议二
您可以创建一个 Helper 来让您更模块化地工作。
值(value)
publicStates
myApp.value('publicStates', function(){
return {
module: 'public',
routes: [{
name: 'login',
config: {
url: '/login'
}
}]
};
});
值(value)
privateStates
myApp.value('privateStates', function(){
return {
module: 'private',
routes: [{
name: 'suggestions',
config: {
url: '/suggestions'
}
}]
};
});
helper
myApp.provider('stateshelperConfig', function () {
this.config = {
// These are the properties we need to set
// $stateProvider: undefined
process: function (stateConfigs){
var module = stateConfigs.module;
$stateProvider = this.$stateProvider;
$stateProvider.state(module, {
abstract: true,
module: module
});
angular.forEach(stateConfigs, function (route){
route.config.module = module;
$stateProvider.state(module + route.name, route.config);
});
}
};
this.$get = function () {
return {
config: this.config
};
};
});
现在您可以使用帮助器将状态配置添加到您的状态配置中。
myApp.config(['$stateProvider', '$urlRouterProvider',
'stateshelperConfigProvider', 'publicStates', 'privateStates',
function ($stateProvider, $urlRouterProvider, helper, publicStates, privateStates) {
helper.config.$stateProvider = $stateProvider;
helper.process(publicStates);
helper.process(privateStates);
}]);
这样你就可以抽象出重复的代码,并提出一个更加模块化的解决方案。
注意:以上代码未经测试
关于angularjs - 在 Angular ui-router 中使用带有 $stateChangeStart toState 和 fromState 的 $state 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21891218/