我正在为编写处理程序$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
没有include方法。我应该做些不同的事情,还是有办法做我想做的事情?
另外,当//一些登录内容包含时$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的逻辑,因为我认为这超出了您的问题。
您可以创建一个帮助程序,以使它更加模块化。
值publicStates
myApp.value('publicStates', function(){
return {
module: 'public',
routes: [{
name: 'login',
config: {
url: '/login'
}
}]
};
});
值privateStates
myApp.value('privateStates', function(){
return {
module: 'private',
routes: [{
name: 'suggestions',
config: {
url: '/suggestions'
}
}]
};
});
帮手
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);
}]);
这样,您可以抽象出重复的代码,并提出一个更具模块化的解决方案。
注意:以上代码未经测试
问题内容: 如何将中间件应用于Go Gorilla Toolkit多路复用器子路由器? 我有以下代码: 我想应用一个检查安全性令牌的中间件处理程序,但仅在以开头的那些路径上。 问题答案: 以下似乎有效: 哪里 和
问题内容: 自从我开始解决这个问题已经有几个小时了,我似乎无法解决这个问题。 我有一个可能会导致用户实际输入URL的应用程序。在这种情况下,不难相信用户可能会输入斜杠。例如, www.example.com/users/2和www.example.com/edit/company/123 应该与 www.example.com/users/2/和www.example.com/edit/compa
问题内容: 我想将客户端和服务器完全分开,所以我用创建了一个vuejs项目。在这个项目中,我使用vue- router进行所有路由(这包括特殊路径,例如.. 这是我的routes.js文件: 当我运行应用程序时,一切运行正常。我现在准备部署到云,所以我就跑了。由于我需要使用HTTP服务器,因此我决定也使用Go。.这是我的Go文件: 我可以加载似乎一切正常的主页()(css,图像,翻译,对服务器的调
我有没有温和的方式说骆驼应该跳过这个(没有“camelerrorhandlerhandle”属性删除)? 谢谢
问题内容: 假设我想要具有大致如下所示的REST端点: 如果可行,对每个对象都使用CRUD。例如,/ user POST创建一个新用户,GET获取所有用户。/ user / user_id GET仅获取该用户。 项目是特定于用户的,因此我将它们放在特定用户 user_id 下。 现在,为了使Express Routing模块化,我制作了一些路由器实例。有一个供用户使用的路由器,以及一个用于物品的路
问题内容: 我正在使用AngularUI路由器,并且试图建立嵌套/子链接。 一切正常,但是如何在“联系人”选项卡中选择/激活链接? 基本上,我需要能够在加载“联系人”页面时选择/激活一个联系人链接。当前,由于某些原因,除非我单击链接,否则它不会阅读。 柱塞:http ://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview 问题答案: 有一种更快的方法可以做到