0

我有添加新的国家使用我的应用“UI的运行阶段后的问题-Router-Extras'。“UI-路由器-附加” - 不能附加/添加新“FutureState”对象App.Config中()已加载

我一直在努力,现在相当长的一段时间来连接和加载后用户已使用“UI-路由器-额外”插件“ui-router-extras

这里成功验证新州是一个参考该'UI-Router-Extras' Examples为我使用的FutureState文档,但我觉得也许我的方案或者是略有不同的是什么显示或我完全失去了一些东西。

示例代码中PLUNKER - 点击登录按钮 - >http://plnkr.co/edit/PQwNQcLNMyPfpke076yy


下面的代码加载并使用:


我成功地让最初的app.config()从延迟加载一个外部文件。像代码描述如下:


PUBLIC - 'lazyload /美国/公共states.json'

[ 
    { 
     "name": "unauth", 
     "url": "/", 
     "controller": "LoginCtrl", 
     "templateUrl": "app/components/core/login/login.html", 
     "roles": ["public"] 
    }, 
    { 
     "name": "otherwise", 
     "url": "/", 
     "roles": ["public"] 
    } 
] 

初步应用 - 使用 'UI-路由器-附加' 外部最初加载路由负载 - 公共美国的成功延迟加载要使用开始就登录:

'use strict'; 

var app = angular.module('app', ['ui.router', 'ct.ui.router.extras']) 

    .config(function ($urlRouterProvider, $stateProvider, $futureStateProvider) { 

     app.stateProvider = $stateProvider; // MIGHT NEED REFERNCE LATER? 
     app.futurestateProvider = $futureStateProvider; // MIGHT NEED REFERNCE LATER? 

     // ASYNC LOAD OF ROUTES AVAILABLE - SOON TO BE BY ROLE 
     var futureStateResolve = ["$http", function($http) { 
      return $http.get("lazyload/states/public-states.json").then(function(response) { 
       angular.forEach(response.data, function(state) { 

        $stateProvider.state(state); 
        console.log(state.roles); 

       }) 
      }) 
     }]; 

     $futureStateProvider.addResolve(futureStateResolve); 
     console.log($futureStateProvider); 

    }); 



下面的代码不起作用


下面是我的部分代码不起作用:

PRIVATE - 使用 'UI-路由器-附加' 外部初始加载路线 - “ lazyload/states/public-states.json'

下面这个json是为了在用户使用延迟加载和FutureStates登录后添加的。到目前为止,没有运气:(

[ 
    { 
     "name": "app", 
     "abstract": true, 
     "url": "?menu1State", 
     "templateUrl": "app/components/core/layout/layout.html", 
     "controller": "LayoutCtrl", 
     "roles": ["level1"] 
    }, 
    { 
     "name": "app.dashboard", 
     "url": "/app", 
     "views": { 
      "feature": { 
       "templateUrl": "app/components/core/features/features.html", 
       "controller": "FeatureCtrl" 
      } 
     }, 
     "roles": ["level1"] 
    }, 
    { 
     "name": "app.associations_beanbags", 
     "url": "/app/associations/bean-bags?myParam1&myParam2&modalState", 
     "views": { 
      "feature": { 
       "templateUrl": "app/components/core/features/associations/bean-bags.html", 
       "controller": "BeanbagsCtrl" 
      } 
     }, 
     "roles": ["level2"] 
    } 
] 

登录按钮触发认证成功后,推迟创建状态:

<a id="btn-fblogin" href="" class="btn btn-primary pull-right" ng-click="callNotify(username, password);">Login</a> 


当登录按钮用户点击它嘲笑什么情况是成功和呼叫“$ scope.callNotify”触发你看到下面的代码。结束意外事件发生的一切工作,直到“app.futurestateProvider .futureState(newState);“和试图调用新的状态,看是否加入” $ state.go(“app.dashboard”);'。

控制台错误:

Error: Could not resolve 'app.dashboard' from state 'unauth' 
at Object.transitionTo (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:2521:17) 
at Object.$state.transitionTo (http://localhost:3000/bower_components/ui-router-extras/release/ct-ui-router-extras.js:136:34) 
at Object.$state.transitionTo (http://localhost:3000/bower_components/ui-router-extras/release/ct-ui-router-extras.js:874:55) 
at Object.$state.transitionTo (http://localhost:3000/bower_components/ui-router-extras/release/ct-ui-router-extras.js:1301:48) 
at Object.go (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:2454:21) 
at http://localhost:3000/app/components/core/auth/auth-service.js:58:13 
at http://localhost:3000/bower_components/angular/angular.js:8113:11 
at wrappedCallback (http://localhost:3000/bower_components/angular/angular.js:11573:81) 
at wrappedCallback (http://localhost:3000/bower_components/angular/angular.js:11573:81) 
at http://localhost:3000/bower_components/angular/angular.js:11659:26 

那么这个貌似对我来说,当我们所期望的状态从来没有真正得到补充,从而导致一个错误,说所有这一切都在指出以下的错误导致“对不起,我没有看到你正在寻找的路线。”

'use strict'; 

app.controller('AuthServiceTestCtrl', ['$window','$scope','$http', '$state', function (win, $scope, $http, $state) { 

    $scope.callNotify = function(username,password, $stateProvider, $futureStateProvider) { 
      //notify(username, password); // CALL SERVICE AND GET A RETURN VALUE/ACTION 

      var loadedAgain = $http.get("lazyload/states/private-states.json").success(function(response) { 

       if(username == "[email protected]" && password == "abc123"){ 

        console.log('Valid Credentials. Logging In.'); 

        // NOW THAT USER IS LOGGED IN REGISTER NEW PRIVATE ROUTE/STATES - PREFERABLY FROM THE SECURED SERVER FILE ('private-states.json') ABOVE 
        var adminModuleFutureStates = [ 
         { 
          "name": "app", 
          "abstract": true, 
          "url": "?menu1State", 
          "templateUrl": "app/components/core/layout/layout.html", 
          "controller": "LayoutCtrl", 
          "roles": ["level1"] 
         }, 
         { 
          "name": "app.dashboard", 
          "url": "/app", 
          "views": { 
           "feature": { 
            "templateUrl": "app/components/core/features/features.html", 
            "controller": "FeatureCtrl" 
           } 
          }, 
          "roles": ["level1"] 
         }, 
         { 
          "name": "app.associations_bean-bags", 
          "url": "/app/associations/bean-bags?myParam1&myParam2&modalState", 
          "views": { 
           "feature": { 
            "templateUrl": "app/components/core/features/associations/bean-bags.html", 
            "controller": "BeanBagsCtrl" 
           } 
          }, 
          "roles": ["level2"] 
         } 
        ]; 

        angular.forEach(adminModuleFutureStates, function(newState) { 
         console.log(newState); 
         app.futurestateProvider.futureState(newState); // WAS SAVED AS A VAR IN APP CONFIG FOR LATER REFERENCE 
        }); 

        // FINALLY GO TO ONE OF THE NEWLY ADDED PRIVATE STATES WE JUST ADDED WHICH IS A DASHBOARD 
        $state.go('app.dashboard'); 

       } 
      }); 

     }; 
    }]); 

我很抱歉没有工作的例子准备好了,我在它的权利,但我想我会张贴此我们展示什么,我有和可能获得的讨论或解决方案至于如何我可以通过我以上后,应用程序已经加载的配置等上市控制器在运行时加载状态,以UI路由器..

我试图最终在这里做的是这样的:

我真的只需要在登录时开始公开两条安全的公共路线。然后,一旦用户登录以前的公共路线停留,我试图添加或装饰现有的路线与新的,现在允许用户只能访问他们的角色提供的路线。对于我们来说安全性是非常重要的,我并没有看到任何好处,无论何时在登录页面上加载每条可能的路线,让某人知道什么是api或服务器路线,但至少未登录。

我很抱歉散漫,但我得出结论,我只是平坦做错了,需要一些额外的眼睛,也许赶上为什么我不能在加载后添加新的状态。

非常感谢你这么多!

IN PLUNKER示例代码 - 点击登录按钮 - >http://plnkr.co/edit/PQwNQcLNMyPfpke076yy

+0

@Framkie,你找到了解决这个问题的方法吗? – Asik 2015-02-25 04:31:10

回答

0

我决定用$ ocLazyLoad服务,而不是,但仍然使用应用注射器添加后动态应用程序加载并已初步与基本配置的路由认证等之前公共路由..

angular.module("app").configInjector.invoke(['$stateProvider', function ($stateProvider) { 

然后后该应用注射器是设置和用户被认证和角色(一个或多个)已被服务器验证的定义允许UI的路由器视图/路由JSON响应/状态是循环的r并动态添加到ui-router状态定义中。这些路由是在json中定义的,但任何伴随的控制器和视图都是使用$ ocLazyLoad进行延迟加载的。

总的来说我落得这样做如下:

angular.module("auth") 
.factory('AuthRouteLoaderFactory', ['$window', '$rootScope', '$http', '$state', '$cookieStore','$location', '$timeout','AuthSession', 
    function(win, $rootScope, $http, $state, $cookieStore, $location, $timeout, AuthSession) { 

     // PRIVATE INTERFACE 
     function loadPrivateRoutes() { 

      console.log('AuthRouteLoaderFactory :: LOADING PRIVATE ROUTES'); 

      var loadedPrivateRoutes = $http.get("lazyload/states/private-states.json").success(function (response) { 

     angular.module("app").configInjector.invoke(['$stateProvider', function ($stateProvider) { 

        // VERY IMPORTANT - POST LOGIN ROUTE LOADER/INJECTOR;// DYNAMIC AND SERVER DETERMINED JSON ITERATED BASED ON SPECIFIC ROLES PRE-MADE BY SERVER. 
        angular.forEach(response, function (state) { 

         if(!state.abstract){ 
          state.views.feature.resolve[state.views.feature.data.controllerAlias] = ['$ocLazyLoad', function($ocLazyLoad){return $ocLazyLoad.load({"name": state.views.feature.data.controllerAlias,"files": state.views.feature.data.controllerFiles})}]; 
          state.views.feature.resolve.isAuthenticated = function(){ 
       // CHECK IF WE ARE A VALID SESSION FOR EACH LAZY LOAD 
       //AuthSession.validateToken(); 
       }; 
         } 

         console.log('AuthRouteLoaderFactory :: loadPrivateroutes state loaded -> ' + state.name); 
         $stateProvider.state(state.name, state); 
        }); 

        $state.go('app.dashboard'); 

       }]); 

      }); 

     } 

     // FOR NOW WE LOAD ROUTES ANYWAY UNTIL WE CALL API'S /ME OR PING SERVICE, THEN ON SUCCESS WE LOAD ROUTES 
     if(AuthSession.validateToken()){ 
      $rootScope.hideLoader = true; 
      loadPrivateRoutes(); 
      console.log('AuthRouteLoaderFactory :: SESSION VALIDATION SUCCESSFUL :: PROCEED'); 
     } 

     // PUBLIC INTERFACE 
     return { 
      testFactory: function() { 
       console.log('AuthRouteLoaderFactory :: testFactory'); 
      }, 
      isSessionValid: function(){ 
       return $cookieStore.get('fakeLoginSession'); 
      }, 
      invalidateSession: function(){ 
       $cookieStore.remove('fakeLoginSession'); 
       $location.path('/login.html'); 
      }, 
      loadRoutes: loadPrivateRoutes 
     }; 
    } 
]); 

公共美国/路线:

[ 
    { 
     "name": "unauth", 
     "url": "/", 
     "controller": "LoginCtrl", 
     "templateUrl": "app/components/core/login/unauth.html", 
     "data": { 
      "roles": ["public"] 
     } 
    }, 
    { 
     "name": "login", 
     "url": "/login", 
     "controller": "LoginCtrl", 
     "templateUrl": "app/components/core/login/unauth.html", 
     "data": { 
      "roles": ["public"] 
     } 
    }, 
    { 
     "name": "otherwise", 
     "url": "/", 
     "data": { 
      "roles": ["public"] 
     } 
    } 
] 

私人美国/路线:

[ 
    { "name": "app", "abstract": true, "url": "", "templateUrl": "app/components/core/layout/layout.html", "controller": "LayoutCtrl" }, 
    { 
     "name": "app.dashboard", 
     "views": { 
      "feature": { 
       "templateUrl": "lazyload/components/core/features/dashboard/dashboard.html", 
       "controller": "DashboardCtrl as dashboard", 
       "resolve": {}, 
       "data": { 
        "controllerAlias": "dashboard", 
        "controllerFiles": ["lazyload/components/core/features/dashboard/dashboard-controller.js"] 
       } 
      } 
     } 
    }, 
    { 
     "name": "app.associations_role-type", 
     "views": { 
      "feature": { 
       "templateUrl": "lazyload/components/core/features/associations/role-type.html", 
       "controller": "RoleTypeCtrl as roleType", 
       "resolve": {}, 
       "data": { 
        "controllerAlias": "roleType", 
        "controllerFiles": ["lazyload/components/core/features/associations/role-type-controller.js"] 
       } 
      } 
     } 
    } 
]