我的UI-路由器配置是这样的:
My ui-router configuration is this:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'sidemenu/sidemenu.html',
controller: 'SideMenuCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'login/login.html',
controller: 'LoginCtrl'
})
.state('app.dashboard', {
url: '/dashboard',
views: {
menuContent: {
templateUrl: 'dashboard/dashboard.html',
controller: 'DashboardCtrl'
}
}
})
[More states here]
$urlRouterProvider.otherwise('/app/dashboard');
当用户浏览到 /应用/仪表板
我要检查,如果他们被授权,然后:
When user navigates to /app/dashboard
I would like to check if they are authorized, and then:
/登录
,如果他们没有被授权,或允许查看仪表盘,如果他们被授权
redirect to /login
if they are not authorized, or
allow to see the dashboard if they are authorized
这似乎这样的伎俩:(基于的这个例子)
This seems to do the trick: (based on this example)
$rootScope.$on('$stateChangeSuccess', function(event) {
var path = $location.path();
if (path === '/login') {
return;
}
// Halt state change from even starting
event.preventDefault();
Auth.getCurrentUser().then(function(currentUser) {
if (currentUser === null) {
$state.go('login');
} else {
// Continue with the update and state transition
$urlRouter.sync();
}
});
});
这个解决方案的唯一的问题是,如果一个非授权用户浏览到仪表板,仪表板模板是可见光第一。只有当授权响应是回来它改变到登录模板。
The only problem with this solution is that, if a non-authorized user navigates to the dashboard, the dashboard template is visible first. Only when the authorization response is coming back it changes to the login template.
有没有办法不显示仪表板,而我们授权的用户?
Is there a way not to show the dashboard while we authorize the user?
我也试图改变 $ stateChangeSuccess
到 $ stateChangeStart
,但它并没有真正的工作(路由似乎,然后被彻底打破)。
I also tried to change $stateChangeSuccess
to $stateChangeStart
, but it didn't really work (routing seems to be completely broken then).
有关使用下决心块怎么办?
What about using a resolve-block?
.state('app.dashboard', {
url: '/dashboard',
views: {
menuContent: {
templateUrl: 'dashboard/dashboard.html',
controller: 'DashboardCtrl',
resolve: {
login: function($q, Auth) {
var deferred = $q.defer();
Auth.getCurrentUser().then(function(currentUser) {
if (currentUser == null) {
deferred.reject();
} else {
deferred.resolve();
}
});
return deferred.promise;
}
}
}
}
})
状态变化不会发梗,直到承诺解决这样的模板不应该被显示。拒绝承诺将引发 $ stateChangeError
根据这个答案,以便你需要处理的错误和重定向到登录页面。
The state-change won't happed untill the promise is resolved so the template should not be showing. Rejecting the promise will raise a $stateChangeError
according to this answer so you would need to handle that error and redirect to the login-page.