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有一个特殊的组件生命周期挂钩来处理这些名为$canActivate的边缘情况，以检查是否应该尝试激活它。您可以与身份验证/授权服务交谈，以验证对于给定用户的状态，是否允许他们访问您的组件。

这样，您的组件将足够智能，可以封装激活自身所需的任何检查。

此外，您可以注入任何服务，如$http或您的自定义服务，以与您的服务器对话。在下面的代码片段中，我使用仅返回true的$timeout模拟此调用，如果返回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，它是一个始终具有传递给该路由的参数的对象。例如CCD_ 8，其中id是传递到所请求的路由的参数。

使用TypeScript:使用$canActivate

我写了一篇关于如何在TypeScript中使用writeAngularJS组件的文章，并有一些使用路由器生命周期挂钩的草稿，我将于今天发布。在此之前，以下是使用TypeScript使用一些钩子的代码：

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());

上面的typescript代码与上面使用$canActivate的javascript代码片段相同。

不幸的是，当它被定义为类（如$canActivate()）中的函数成员时，它没有起作用，而生成的javascript是使用原型（如ReviewDetailsComponent.prototype.$canActivate）定义的这个成员。

但是，当直接使用lambda表达式语法或函数编写时，它可以很好地工作。如果使用类来定义组件，那么在这种情况下最好选择lambda表达式。

使用TypeScript使用$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
    }
}

Answer 2

根据请求从我的评论中粘贴

对页面上的加载进行检查怎么样？这将在有角度的情况下完美运行。

如果您想处理会话过期，可以向所有请求添加一个拦截器，并监视401响应。