AngularJS 和 ui 路由器登录︰ 最大迭代达成

发布时间: 2017/5/1 15:31:32
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个 AngularJS 应用程序 UI 路由器。在我 app.js 文件我有下面的代码 (其中 AuthFact 是工厂定制身份验证实用程序)︰

var testapp = angular.module('testapp', ['ui.router']);

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

   $urlRouterProvider.otherwise('/app/products');

   $stateProvider
    .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'Views/App.html',
    })
    .state('app.products', {
        url: '/products',
        templateUrl: 'Views/Product/Product.html',
        controller: 'ProductController',
        authenticate: true
    })
    .state('login', {
    url: '/login',
    templateUrl: 'Views/Login.html',
    authenticate: false
    })
});

testapp.run(function ($rootScope, $state, AuthFact) {
$rootScope.$on("$stateChangeStart", 
   function (event, toState, toParams, fromState, fromParams) {
    if (!AuthFact.IsAuthenticated() && toState.authenticate == true) {
        $state.go('login');
        event.preventDefault();
    }
  });
});

当我运行我的应用程序时,它试图去 /products url 因为否则为路线,但是因为用户没有登录它重定向到 /login 页。

问题是,我有以下错误︰

错误: [$rootScope: infdig] 达到 10 $digest() 迭代。中止 ! 观察家们发射在最后 5 次迭代:]

解决方法 1:

我碰到这个问题也和这里是我们怎么解决它......

第一, otherwise 规则。你会想要定向到正确的 URL,基于经过身份验证的状态。去 AuthFactconfig ,你可以使用函数版本的 otherwise ,通过 $injector ...

$urlRouterProvider.otherwise(function($injector) {
    var AuthFact = $injector.get('AuthFact');
    return AuthFact.IsAuthenticated() ? '/app/products' : '/login';
});

然后为你的状态更改listener......

$rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
    if (toState.authenticate && !AuthFact.IsAuthenticated()) {
        event.preventDefault();
        $state.go('login');
    }
});

而不是向你状态配置添加顶级属性 (如 authenticate ),你应该使用 data 属性,如

data: {
    authenticate: true
}
官方微信
官方QQ群
31647020