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

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

此外，您还可以注入(inject)任何服务(例如 $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的钩子(Hook)来读取下一个和上一个路由。如果您对路由的参数感兴趣，请使用 next.params，它是一个始终包含传递给该路由的参数的对象。例如next.params.id 其中 id 是传递给请求的路由的参数。

使用 TypeScript 使用 $canActivate:

I've written a post regarding how to use write AngularJS components在 TypeScript 中，并有一些使用路由器生命周期 Hook 的草稿，我今天将发布这些草稿。到目前为止，下面是使用 TypeScript 使用一些钩子(Hook)的代码:

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 这样的原型(prototype)定义的成员时，它不起作用。 $canActivate。

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

通过 TypeScript 使用 $routerOnActivate

在这种情况下，链接 Controller 还使用另一个名为 $routerOnActivate 的生命周期钩子(Hook)，如果定义为函数成员，则效果很好:

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
    }
}