javascript - AngularJS |在加载之前处理路由

标签 javascript authentication angularjs angularjs-routing angularjs-authentication

我希望通过外部服务为我的路由创建简单的身份验证检查。

我定义了路由对象的访问要求:

$routeProvider
    .when('/', {
        templateUrl: 'src/app/views/index.html',
        controller: 'indexCtrl',
        authenticated: true
    })
    .when('/login', {
        templateUrl: 'src/app/views/login.html',
        controller: 'loginCtrl',
        anonymous:  true
    })
    .otherwise({
        redirectTo: '/'
    })
;

然后,我检查我是否拥有 $routeChangeStart 事件中的权限。

$rootScope.$on('$routeChangeStart', function (event, next) {
    if(next.authenticated && !$myService.isLoggedin())
        $location.path("/login");
    else if(next.anonymous && $myService.isLoggedin())
        $location.path("/secured");
});

事实上,它确实有效-
如果用户未经过身份验证,则会将其移动到登录页面,如果他已通过身份验证,但该路线仅适用于匿名用户,则会将其移动到另一个页面,等等。

但是 - 这个重定向实际上是在 Controller 和模板加载之后发生的! 它会导致我的 Controller 对我的 REST API 执行一些不必要的请求,即使我没有经过身份验证。

在处理之前我如何处理路由?

最佳答案

使用$routeProvider resolve

.when('/', {
    templateUrl: 'src/app/views/index.html',
    controller: 'indexCtrl',
    resolve: function($q, $location) {
      var deferred = $q.defer(); 
      deferred.resolve();
      if (!isAuthenticated) {
         $location.path('/login');
      }

      return deferred.promise;
    }
})

关于javascript - AngularJS |在加载之前处理路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18788586/

相关文章:

javascript - 如何查找具有指定类的第一个元素

javascript - ExtJS中多视口(viewport)的情况

javascript - Firebase,将快照数据存储到数组变量

.net - 当有人试图运行我的 .net 桌面应用程序时,如何强制显示 "Run As"表单?

javascript - 使用 Jasmine 测试 Angular Controller - 模块问题

javascript - AngularJS $http 将原始 HTML 元素放在正文中

javascript - Angular 2 动态表单 - 实现清晰的功能

发布中的身份验证机制

c - 用于嵌入式系统的轻量级 Web 身份验证

javascript - 达到 10 次摘要迭代,正在中止(作用域函数问题)