angularjs UI路由器产生无限循环 [英] angularjs ui-router generates infinite loop

问题描述

我知道这个问题进行了讨论多次，但解决方案剪掉适合我的要求。的追求很简单。如果用户未在用户登录应重定向到登录页面。当我在$做到这一点，它会产生无限循环。让我知道什么是最好的解决方案。

I am aware this question was discussed multiple times but the solutions didnt fit into my requirement. The quest is simple. If the user is not logged in the user should be redirected to login page. When i do it in $on, it generates infinite loop. Let me know what is the best solution.

    var adminpanel = angular.module('administrator', ['ngMessages','ui.router','ui.bootstrap','ngCookies']);
    adminpanel.config(function ($stateProvider, $urlRouterProvider) {
    //    $urlRouterProvider.otherwise("/login");
        $urlRouterProvider.otherwise( function($injector, $location) {
                var $state = $injector.get("$state");
                $state.go("login");
            });
                $stateProvider
                .state('login', {
                                url: "/login",
                                controller:"userCtrl",
                                templateUrl: "views/login.tpl.html",
                                permissions:{except:['admin']}
                                }
                      )
                  .state('menu', {
                                templateUrl: "views/menu.tpl.html",
                                controller:'adminCtrl',
                                permissions:{allow : ['admin']}
                                }
                      )
                  .state('menu.dashboard', {
                                url: "/dashboard",
                                templateUrl: "views/dashboard.tpl.html",
                                permissions:{allow : ['admin']}
                                }
                      )

});


adminpanel.run([ '$rootScope', '$state', '$stateParams','$cookieStore',function ($rootScope, $state, $stateParams,$cookieStore) {
 $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
        $rootScope.$on('$stateChangeStart',function(event, toState, fromState){

            if($rootScope.session == undefined && $cookieStore.get('name') == undefined){$rootScope.session={}}
            else if($rootScope.session == undefined && $cookieStore.get('name') != undefined){
                    $rootScope.session={set:true, name : $cookieStore.get('name'), userid :$cookieStore.get('userid'), role:$cookieStore.get('role')};
            };
        //Added below lines as update    
             if(toState.name === "login"){
              return;
            }
        //Added above lines as update
        var authorized = true;
         if(Object.keys($rootScope.session).length === 0){
              event.preventDefault();
            $state.go('login');
         }
        else if(Object.keys(toState.permissions).length !=0){
                    console.log($rootScope.session.role);
                    angular.forEach(toState.permissions, function(value,key){
                     angular.forEach(value,function(role){
                        if(key === 'except' && role === $rootScope.session.role)
                        {authorized = false;}
                        else if(key === 'allow' && role !== $rootScope.session.role)
                        {authorized = false;};
                    });
                });
}
if(!authorized){
                        event.preventDefault();
                        $state.go('menu.dashboard');
                };

        });

}]);

预先感谢帮助。

更新1：

该解决方案正常工作。但是，如果用户登录，用户不得，如果他试图通过地址栏打它访问登录页面。所以，我创建了一个权限参数，除了关键的。

The solution works fine. But if the user is logged in, the user shall not access the login page if he tries to hit it through address bar. So i created a permission parameter with except key.

但是，如果用户通过点击地址栏登录页面，生成登录页面，这应该不是，它应该被重定向到menu.dashboard。

But if the user hits login page through address bar, the login page is generated, which should not and it should be redirected to menu.dashboard.

希望我是清楚的。

推荐答案

这里的关键，是避免重定向，如果它的已经发生，如果已经重定向：

The point here, is to avoid redirection, if it already happened, if already redirected:

...
// never redirect to state, if already going there
if(toState.name === "login"){
  return;
}

// evaluate some IF here only if we go to other state then login
if(Object.keys($rootScope.session).length === 0) {
  event.preventDefault();
  $state.go('login');
  return;

}

这篇关于angularjs UI路由器产生无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！