Angular 1.5 $routerOnActivate 在根路由器上

Question

我想确保用户在继续 he/she 尝试访问的任何组件之前已正确登录（如果他们未登录）。让他们登录。

我的想法是在根路由器中的 $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

不要在加载页面时执行检查，而是使用以下内容：

Angular 有一个特殊的组件生命周期钩子来处理这些名为 $canActivate 的边缘情况——检查它是否应该尝试激活它。您可以与 authentication/authorization 服务交谈，以验证对于给定用户的状态，他们是否允许访问您的组件。

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

此外，您可以注入任何服务，如 $http 或您的自定义服务，以与您的服务器通信。在下面的代码片段中，我使用 $timeout 模拟此调用，只是 return 为真，如果 return 为假，您的组件将不会激活。

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 使用 TypeScript:

I've written a post regarding how to use write AngularJS components 在 TypeScript 中，并有一些使用路由器生命周期挂钩的草稿，我今天将发布这些草稿。到那时，下面是使用 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());

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

不幸的是，当 this 被定义为 class 中的函数成员时它不起作用，例如 $canActivate() 并且生成的 javascript 是使用原型定义的成员，例如 [=22] =].

但是当使用 lambda 表达式语法或直接使用函数编写时效果很好。如果您使用 class 来定义组件，在这种情况下最好选择 lambda 表达式。

使用 $routerOnActivate 使用 TypeScript

本例中的链接控制器还使用了另一个名为 $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
    }
}

Angular 1.5 $routerOnActivate 在根路由器上

Angular 1.5 $routerOnActivate on Root Router

authentication

angularjs

ngcomponentrouter

angular-component-router