如何访问从$ stateChangeStart一个UI的路由器根状态的“解析”的财产？ [英] How do I access the 'resolve' property of a UI-Router root state from $stateChangeStart?
问题描述
我想实现我的应用程序，用户身份验证检查和访问检查系统，但是我不断撞击路障。我觉得我有它正确的方式，但这次我还有最后一个障碍。
一个小背景：我试图把所有code进入$ rootScope.on（$ startChangeStart）和它的工作，可怕的......但它的工作。路线总是重定向，但由于对后端AUTH检查它显示的第一个请求页面一秒钟，然后重定向页面，每次1/2。因此，我试图通过调用EVT'暂停'的页面加载。preventDefault（）就在$ startChangeStart功能，它的工作的开始，而是试图把用户返回到原来的路线之后引起了路由器无限循环
所以经过更多的研究和阅读了大量的堆栈帖子我敢肯定，决心：就是把AUTH检查，以确保当它出现的页面没有加载，然后将用户重定向正确的地方，如果需要的从$ startChangeStart。 （$状态和事件总是在我尝试将它们注入到下决心功能未定义）这似乎是最佳组合。
我的问题：我有我的应用程序的根状态的决心：主
这是为了避免code冗余，但是我不能确定如何访问根状态的属性，因此决心结果，从$ stateChangeStart功能。使用toState是孩子的状态，而fromState要么是previous状态或使用'^'路线的抽象状态...
我必须把解决对每一个孩子的状态这个工作，或者是有没有办法从这个角度访问根状态？
基本应用程序设置：
angular.module（'应用'，['ui.router'，'ui.bootstrap'，'ui.event'，'AngularGM'，'ngResource']）
的.config（['$ urlRouterProvider'，'$ stateProvider'，函数（$ urlRouterProvider，$ stateProvider）{
$ urlRouterProvider
。当（'/家'，'/'）
。什么时候（''， '/'）
。当（'/签上/乔'，'/申请）
。除此以外（'/'）; $ stateProvider
.STATE（'主'，{
网址：''，
摘要：真实，
templateUrl：意见/ main.html中，
控制器：'MainCtrl'，
解析：{
的checkAccess：['的AccountService'，函数（的AccountService）{
accountService.checkAuth（函数（）{
accountService.checkAccess（功能（访问）{
返回访问;
}）;
}）;
}]
}
}）
.STATE（'main.home'，{
网址：''，
摘要：真实，
templateUrl：意见/ home.html做为'，
控制器：'HomeCtrl
}）
.STATE（'main.home.index'，{
网址：'/'，
templateUrl：意见的/ home / index.html的
}）;
.RUN（['$ rootScope'，'$州'，'$ stateParams'，'AccountService的'，函数（$ rootScope，$状态，$ stateParams）{
$ rootScope $状态= $状态。
$ rootScope $ stateParams = $ stateParams。
$ rootScope。在$（'$ stateChangeStart'，函数（事件，toState，toParams，fromState，fromParams）{
console.dir（toState）;
console.dir（toParams）;
console.dir（fromState）;
console.dir（fromParams）;
如果（！toState.checkAccess.allowed）{
。事件preventDefault（）;
$ state.transitionTo（toState.checkAccess.newState）;
}
}）;
}]）;
这是从console.dir（输出）上的两个状态对象调用：
对象
名称：main.home.index
templateUrl：意见的/ home / index.html的
网址：/
__proto__：对象目的
控制器：PlacesCtrl
名称：main.places.search
templateUrl：意见/ places.html
网址：/地方
__proto__：对象
更新
哎呀，忘了提AngularJS版本是V1.2.0，rc.2
$ state.current console.dir（）
对象
摘要：真
名称：
网址：^
观点：空
__proto__：对象
是的，我相信你可以从 $ stateChangeStart 函数访问根状态。
在使用纯AngularJS我通常使用电流。$$路线
例如，使用下面的路线
。当（'/家'，{
标题：'家'，
bodyClass：'会议'，
CONTROLER：HomeCtrl
}）
我可以访问像这样的根州
$ rootScope。在（'$ routeChangeSuccess'，函数（事件，目前，previous）{$ 如果（电流。$$路线）{ $ rootScope.title =当前$$ route.title。 $ rootScope.bodyClass =当前$$ route.bodyClass。
} }）;
使用 UI路由器这只是一个有点不同，因为它被称为 $ state.current 。和你打什么路线，你可以访问相关联的所有属性（如：$ state.current.url）
所以，在你的code，你可以有这样的事情
.RUN（['$ rootScope'，'$州'，'$ stateParams'，函数（$ rootScope，$状态，$ stateParams）{ $ rootScope。在$（'$ stateChangeStart'，函数（事件，toState，toParams，fromState，fromParams）{
的console.log（$ state.current.url）;
}）;
}]）;
I'm trying to implement a user auth check and access check system in my app, however I keep hitting roadblocks. I think I have it the correct way this time but I have one last hurdle.
A little background: I tried putting all of the code into the $rootScope.on($startChangeStart) and it worked, horribly... but it worked. The route was always redirected but due to the auth check on the backend it displayed the first request page for 1/2 a second and then the redirect page every time. Thus I tried 'pausing' page load by calling evt.preventDefault() right at the start of the $startChangeStart function, which worked, but trying to put the user back to the original route afterwards caused an infinite loop in the router.
So after more research and reading a lot of stack posts I'm certain that 'resolve:' is the proper place to put the auth check to ensure the page is not loading while it occurs, and then redirect the user if needed from the $startChangeStart. ($state and event are always undefined in my attempts to inject them into a resolve function) It seems like the winning combination.
My problem: I have the resolve on the root state in my app: 'main'
This was to avoid code redundancy, however I cannot determine how to access the root state's properties, and therefore the resolve result, from the $stateChangeStart function. The toState is the child state, while the fromState is either the previous state or an abstract state with the '^' route...
Do I have to put the resolve on every child state for this to work, or is there a way to access the root state from this point?
Basic app setup:
angular.module('App', ['ui.router', 'ui.bootstrap', 'ui.event', 'AngularGM', 'ngResource'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider
.when('/home', '/')
.when('', '/')
.when('/sign-up/joe', '/sign-up')
.otherwise('/');
$stateProvider
.state('main', {
url: '',
abstract: true,
templateUrl: 'views/main.html',
controller: 'MainCtrl',
resolve: {
checkAccess: ['accountService', function(accountService) {
accountService.checkAuth(function(){
accountService.checkAccess(function (access){
return access;
});
});
}]
}
})
.state('main.home', {
url: '',
abstract: true,
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.state('main.home.index', {
url: '/',
templateUrl: 'views/home/index.html'
});
.run(['$rootScope', '$state', '$stateParams', 'accountService', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
console.dir(toState);
console.dir(toParams);
console.dir(fromState);
console.dir(fromParams);
if (!toState.checkAccess.allowed) {
event.preventDefault();
$state.transitionTo(toState.checkAccess.newState);
}
});
}]);
This is the output from the console.dir() calls on the two state objects:
Object
name: "main.home.index"
templateUrl: "views/home/index.html"
url: "/"
__proto__: Object
Object
controller: "PlacesCtrl"
name: "main.places.search"
templateUrl: "views/places.html"
url: "/places"
__proto__: Object
Update
Oops, forgot to mention AngularJS version is v1.2.0-rc.2
$state.current console.dir()
Object
abstract: true
name: ""
url: "^"
views: null
__proto__: Object
Yes, I believe you can access root state from the $stateChangeStart function.
When using pure AngularJS I normally use current.$$route
For example, using the following route
.when('/home', {
title:'Home',
bodyClass: 'meetings',
controler: 'HomeCtrl'
})
I can access the root state like so
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
if (current.$$route) {
$rootScope.title = current.$$route.title;
$rootScope.bodyClass = current.$$route.bodyClass;
}
});
Using ui-router it's just a bit different as it's called $state.current. And you can access all the properties associated to whatever route you hit (e.g: $state.current.url)
So on your code you could have something like this
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
console.log($state.current.url);
});
}]);
这篇关于如何访问从$ stateChangeStart一个UI的路由器根状态的“解析”的财产？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
