在根路由器上使用Angular 1.5 $ routerOnActivate

Question

我想确保用户在继续访问他/她想要访问的任何组件之前，确保它们已正确登录，如果他们未登录，请发送它们以登录。

我的想法是在根路由器中检查$routerOnActivate。对我来说，哪个子路线可以解决这个问题。

但是，似乎没有发生，如果我只是尝试登录的东西。例如：

angular 
    .module('app') 
    .config(function($locationProvider) { 
     $locationProvider.html5Mode(true); 
    }) 
    .value('$routerRootComponent', 'app') 
    .component('app', { 
      templateUrl:'landing.html', 
      controller: MainController, 
      $routeConfig: [ 
       { path: '/', name: 'Dashboard', component: 'dashboard', useAsDefault: true }, 
       { path: '/media', name: 'Media', component: 'media'} 
       ... 
      ] 
    }); 


function MainController(){ 
    this.$routerOnActivate = function(next, previous){ 
     console.log('activated', next, previous); 
    }; 
} 

相同的代码，如果this.$routerOnActivate作品我把它在任何它们在routeConfig指定的成分分析。然而，显然我不想在每个组件中进行相同的检查，而是在全球范围内解决它。

1.5的方法是什么？

Answer 1

从我的评论粘贴请求

如何执行您的网页加载检查？这将在angular.run中完美运行。

如果您想处理会话过期，您可以将拦截器添加到所有请求并观察401响应。

Answer 2

相反，当加载一个页面，使用后进行检查：

角有一个特殊的组件生命周期钩来处理命名$canActivate这些边缘案例 - 要检查它是否应该尝试激活与否。您可以与身份验证/授权服务进行交谈，以验证对于给定用户的状态，他们是否允许访问您的组件。

通过这种方式，您的组件将足够智能以封装激活自身所需的任何检查。

此外，您可以注入任何服务，如$http或您的自定义服务与您的服务器通话。在下面的代码片段中，我使用$timeout来模仿这个调用，只是返回true，如果你返回false，你的组件将不会激活。

angular.module('app').component('someComponent', { 
    template: 'this is an inline component template', 
    $canActivate: function ($timeout) { 
     return $timeout(function(){ 
      return true; 
     }, 2000); 
    } 
}); 

使用另一个名为$routerOnActivate的钩子读取下一条和上一条路径。如果您对路线的参数感兴趣，请使用next.params，该对象始终具有传递给该路线的参数。例如next.params.id其中，id是传递给请求的路由的参数。

使用$canActivate使用打字稿：

I've written a post regarding how to use write AngularJS components在打字稿，并有一些草稿使用路由器的生命周期挂钩，我今天会公布。至此，在这里是使用以下打字稿使用一些钩子的代码：

class ReviewDetailsComponent implements ng.IComponentOptions { 
     templateUrl = 'app/components/review-details.component.html'; 

     // function member for this hook doesn't work!! 
     // so either use lambda expression or function directly. 
     $canActivate = $timeout => $timeout(() => true, 3000); 

     controllerAs = 'model'; 
     controller = ['$http', ReviewDetailsController]; 
    } 

angular.module('app').component('reviewDetails', new ReviewDetailsComponent()); 

的打字稿上面的代码是相同的JavaScript代码段以上使用$canActivate。

不幸的是，当它被定义为像$canActivate()这样的类中的函数成员时，它不起作用，并且生成的javascript是使用原型如ReviewDetailsComponent.prototype.$canActivate定义的此成员。

但是，如果直接使用lambda表达式语法或函数编写，它会很好用。如果您使用类来定义组件，在这种情况下选择lambda表达式是很好的选择。使用打字稿

使用$routerOnActivate

在这种情况下，连接控制器还使用了一个名为$routerOnActivate另一个生命周期挂钩，这工作得很好，如果定义为一个函数成员：

interface IReviewDetailsController { 
    id: number; 
    $routerOnActivate(next, previous); 
} 

class ReviewDetailsController implements IReviewDetailsController { 

    id: number; 

    constructor(private $http: angular.IHttpService) { } 

    $routerOnActivate(next, previous) { 
     this.id = next.params.id; 

     // talk to cache or server to get item by id 
     // & show that on UI 
    } 
}