根路由器上的 Angular 1.5 $routerOnActivate答案

【问题标题】：Angular 1.5 $routerOnActivate on Root Router根路由器上的 Angular 1.5 $routerOnActivate
【发布时间】：2016-08-01 12:45:21
【问题描述】：

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

我的想法是检查根路由器中的$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 的方法是什么？

【问题讨论】：

如何检查页面的加载情况？这将在 angular.run 中完美运行。如果你想处理会话过期，你可以为所有请求添加一个拦截器并监视 401
嗯，是的，我想你是完全正确的。运行块可能是放置这个的理想场所。如果您想发布答案，请将其标记为正确。
什么？ $routerOnActivate 如何在 Angular.run 中“完美运行”？它是一种组件生命周期方法。
鉴于检查在运行块中，因此不需要 $routerOnActivate。而是可以尽快调用负责身份验证检查的函数
刚刚添加了一个比在页面加载时执行身份验证/授权检查更好的解决方案。

标签： angularjs authentication ngcomponentrouter angular-component-router

【解决方案1】：

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

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

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

此外，您可以注入任何服务，例如 $http 或您的自定义服务来与您的服务器通信。在下面的代码 sn-p 中，我使用 $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 是传递给请求路由的参数。

使用 TypeScript 使用 $canActivate：

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代码sn-p相同。

不幸的是，当它被定义为$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
    }
}

【讨论】：

如何在 typescript 中使用 $canActivate 钩子？
@MicrosoftDeveloper 我已经更新了我的答案，我很快就会发布我的草稿，希望今天能深入解释这个概念。
对不起。我对 Angular 和打字稿都很陌生。答案对我来说不是很清楚。我的目的是为 $canActivate() 编写钩子，注入服务并进行一些操作。请在这里参考我的问题stackoverflow.com/questions/37251314/…
@MicrosoftDeveloper 这个问题与这个问题非常相似。告诉我你有什么不清楚的地方？我的回答告诉您该钩子事件的工作原理以及如何在其中注入服务以进行服务器调用以及如何使用打字稿编写它
@MicrosoftDeveloper 在您的问题中，如果 $canActivate 没有记录，那是因为函数成员定义不起作用。使用上面答案中解释的 lambda 表达式方法。

【解决方案2】：

根据要求粘贴我的评论

如何检查页面上的加载情况？这将在 angular.run 中完美运行。

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

【讨论】：